/* ==========================================================================
   MALAYSIA UNFOLDED — Modern Editorial Minimalist Production House Stylesheet
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;800&family=JetBrains+Mono:wght@300;400;500;600&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Sulphur+Point:wght@300;400;700&family=Unbounded:wght@300;400;500;600;700;800;900&display=swap');

/* Sulphur Point (Cielo) — Local Asset Fallback & Alternate Spelling Support */
@font-face {
  font-family: 'Sulphur Point';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/sulphur-point-light.ttf') format('truetype'),
       url('https://fonts.gstatic.com/s/sulphurpoint/v16/RLpkK5vv8KaycDcazWFPBj2afVU6n6k.ttf') format('truetype');
}
@font-face {
  font-family: 'Sulphur Point';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/sulphur-point-regular.ttf') format('truetype'),
       url('https://fonts.gstatic.com/s/sulphurpoint/v16/RLp5K5vv8KaycDcazWFPBj2aRfk.ttf') format('truetype');
}
@font-face {
  font-family: 'Sulphur Point';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/sulphur-point-bold.ttf') format('truetype'),
       url('https://fonts.gstatic.com/s/sulphurpoint/v16/RLpkK5vv8KaycDcazWFPBj2afUU9n6k.ttf') format('truetype');
}

@font-face {
  font-family: 'Sulfur Point';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/sulphur-point-light.ttf') format('truetype');
}
@font-face {
  font-family: 'Sulfur Point';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/sulphur-point-regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Sulfur Point';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/sulphur-point-bold.ttf') format('truetype');
}

/* Rogtes Extra Bold Slanted Expanded — Aqeela Studio */
@font-face {
  font-family: 'Rogtes Extra Bold Slanted Expanded';
  src: local('Rogtes Extra Bold Slanted Expanded'),
       local('Rogtes-ExtraBoldSlantedExpanded'),
       local('Rogtes ExtraBold Slanted Expanded'),
       local('Rogtes'),
       url('../assets/fonts/Rogtes-ExtraBoldSlantedExpanded.woff2') format('woff2'),
       url('../assets/fonts/Rogtes-ExtraBoldSlantedExpanded.woff') format('woff'),
       url('../assets/fonts/Rogtes-ExtraBoldSlantedExpanded.otf') format('opentype'),
       url('../assets/fonts/Rogtes-ExtraBoldSlantedExpanded.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
  font-stretch: expanded;
  font-display: swap;
}

@font-face {
  font-family: 'Rogtes';
  src: local('Rogtes Extra Bold Slanted Expanded'),
       local('Rogtes-ExtraBoldSlantedExpanded'),
       local('Rogtes'),
       url('../assets/fonts/Rogtes-ExtraBoldSlantedExpanded.woff2') format('woff2'),
       url('../assets/fonts/Rogtes-ExtraBoldSlantedExpanded.otf') format('opentype'),
       url('../assets/fonts/Rogtes-ExtraBoldSlantedExpanded.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
  font-stretch: expanded;
  font-display: swap;
}

:root {
  --bg-primary: #FFFFFF;
  --bg-secondary: #F8F8F7;
  --bg-tertiary: #F1F1EF;
  --bg-card: #FFFFFF;
  --bg-overlay: rgba(255, 255, 255, 0.95);
  
  --text-primary: #111111;
  --text-secondary: #555555;
  --text-muted: #888888;
  --text-inverted: #FFFFFF;
  
  --border-subtle: #E8E8E6;
  --border-strong: #D1D1CE;
  --border-focus: #111111;
  
  --accent-noir: #0D0D0D;
  --accent-film: #E63946;
  
  /* Brand Typography (Header & Footer strictly retain Rogtes Extra Bold Slanted Expanded) */
  --font-brand: 'Rogtes Extra Bold Slanted Expanded', 'Rogtes', 'Unbounded', sans-serif;

  /* Elegant Minimal Typography for Sections (Cielo / Sulphur Point) */
  --font-serif: 'Sulphur Point', 'Sulfur Point', sans-serif;
  --font-serif-canto: 'Sulphur Point', 'Sulfur Point', sans-serif;

  /* High-Readability Minimal Web Typography for Section Body & Subtitles */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Technical Monospace & Data Specs */
  --font-mono: 'JetBrains Mono', 'Plus Jakarta Sans', monospace;

  --transition-smooth: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-snap: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --footer-text-glow: 0 0 8px rgba(0, 0, 0, 0.4), 0 0 16px rgba(0, 0, 0, 0.18);
}

[data-theme="dark"] {
  --bg-primary: #0A0A0A;
  --bg-secondary: #121212;
  --bg-tertiary: #1A1A1A;
  --bg-card: #141414;
  --bg-overlay: rgba(10, 10, 10, 0.96);
  
  --text-primary: #F5F5F5;
  --text-secondary: #A0A0A0;
  --text-muted: #666666;
  --text-inverted: #0A0A0A;
  
  --border-subtle: #222222;
  --border-strong: #333333;
  --border-focus: #F5F5F5;
  
  --accent-noir: #F5F5F5;
  --footer-text-glow: 0 0 10px rgba(255, 255, 255, 0.85), 0 0 22px rgba(255, 255, 255, 0.5), 0 0 32px rgba(255, 255, 255, 0.25);
}

/* Base Resets & Typography */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

body,
button,
input,
textarea,
select {
  font-family: var(--font-sans);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.65;
  overflow-x: hidden;
}

/* Solid Opaque Navigation Bar (No Frosted Glass) */
header {
  background-color: var(--bg-primary) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ==========================================================================
   NAVBAR MENU (EXACT ORIGINAL FONTS RETAINED)
   ========================================================================== */
header,
header *,
#mobileMenu,
#mobileMenu * {
  font-family: var(--font-brand) !important;
}

header h1, header h2, header h3, header h4, header h5, header h6,
header .font-serif,
header a span:first-child {
  font-family: var(--font-brand) !important;
  font-weight: 800 !important;
  font-style: oblique 10deg !important;
  font-stretch: expanded !important;
  letter-spacing: 0.02em;
}

header nav a,
header .font-mono {
  font-family: var(--font-brand) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   SECTIONS TYPOGRAPHY (ELEGANT MINIMAL CANTO-STYLE ROMAN SERIF)
   ========================================================================== */
/* Section Headings & Display Titles in Canto-style Roman Serif */
main section h1,
main section h2,
main section h3,
main section h4,
main section h5,
main section h6,
section h1,
section h2,
section h3,
section h4,
section h5,
section h6,
.font-serif,
.fonts-serif {
  font-family: var(--font-serif-canto) !important;
  font-weight: 600 !important;
  font-style: normal !important;
  font-stretch: normal !important;
  letter-spacing: 0.02em;
}

/* Hero Section Titles & Collapsed Card Hover Titles */
#heroBookAccordion h1,
.panel-expanded-view h1 {
  font-family: var(--font-serif-canto) !important;
  font-weight: 600 !important;
  font-style: normal !important;
  font-stretch: normal !important;
  letter-spacing: 0.025em;
}

#heroBookAccordion h3,
.spine-hover-title h3 {
  font-family: var(--font-serif-canto) !important;
  font-weight: 600 !important;
  font-style: normal !important;
  font-stretch: normal !important;
  letter-spacing: 0.02em;
}

/* Section Body Copy, Subtitles & Descriptions (High Readability for Web) */
main section p,
section p,
.font-sans,
.panel-expanded-view p,
.spine-hover-title p {
  font-family: var(--font-sans) !important;
  font-weight: 400;
  font-style: normal !important;
  font-stretch: normal !important;
  line-height: 1.65;
}

/* Technical Identifiers & Spines in Sections */
main section .font-mono,
section .font-mono,
.spine-top-badge,
.spine-hover-hint {
  font-family: var(--font-mono) !important;
  font-style: normal !important;
  font-stretch: normal !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

/* Selection */
::selection {
  background-color: var(--accent-noir);
  color: var(--text-inverted);
}

/* Utilities & Glass / Minimalist Accents */
.editorial-border {
  border: 1px solid var(--border-subtle);
}

.editorial-border-b {
  border-bottom: 1px solid var(--border-subtle);
}

.editorial-border-t {
  border-top: 1px solid var(--border-subtle);
}

.hairline-grid {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, var(--border-subtle) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border-subtle) 1px, transparent 1px);
}

/* Aspect Ratio Enforcers */
.aspect-cinemascope {
  aspect-ratio: 2.39 / 1;
}

.aspect-univisium {
  aspect-ratio: 2.0 / 1;
}

.aspect-cinema {
  aspect-ratio: 16 / 9;
}

.aspect-portrait {
  aspect-ratio: 4 / 5;
}

/* Hero Section */
.hero-gradient-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.85) 100%);
}

.hero-video-wrapper video {
  object-fit: cover;
  filter: contrast(1.05) brightness(0.9);
}

/* Image Hover Zoom & Pan */
.gallery-card {
  position: relative;
  overflow: hidden;
  transition: var(--transition-smooth);
  background-color: var(--bg-secondary);
}

.gallery-card img {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
  will-change: transform;
}

.gallery-card:hover img {
  transform: scale(1.04);
}

.gallery-card .card-overlay {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Grid Layout Modes */
.grid-masonry {
  columns: 1;
  column-gap: 24px;
}
@media (min-width: 640px) {
  .grid-masonry {
    columns: 2;
  }
}
@media (min-width: 1024px) {
  .grid-masonry {
    columns: 3;
  }
}
.grid-masonry .gallery-card {
  break-inside: avoid;
  margin-bottom: 24px;
}

.grid-editorial {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 768px) {
  .grid-editorial {
    grid-template-columns: repeat(2, 1fr);
  }
}

.grid-cinematic {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

/* Reading Progress Bar */
#readingProgressBar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background-color: var(--text-primary);
  width: 0%;
  z-index: 100;
  transition: width 0.1s ease-out;
}

/* Custom Film Specs Tag Badge */
.spec-badge {
  font-family: var(--font-serif);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border: 1px solid var(--border-subtle);
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
  text-transform: uppercase;
}

/* Category Filter Buttons */
.filter-btn {
  font-family: var(--font-serif);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 16px;
  border: 1px solid transparent;
  color: var(--text-secondary);
  transition: var(--transition-snap);
  position: relative;
}

.filter-btn:hover {
  color: var(--text-primary);
}

.filter-btn.active {
  color: var(--text-inverted);
  background-color: var(--accent-noir);
  border-color: var(--accent-noir);
}

/* Modal Backdrop & Transitions */
.modal-backdrop {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background-color: rgba(0, 0, 0, 0.75);
}

/* Article Typography inside reader */
.article-body h3 {
  font-family: var(--font-serif);
  font-size: 1.85rem;
  font-weight: 600;
  margin-top: 2.2rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.article-body h4 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: 1.8rem;
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}

.article-body p {
  font-size: 1.08rem;
  line-height: 1.85;
  color: var(--text-secondary);
  margin-bottom: 1.4rem;
}

.article-body blockquote {
  border-left: 3px solid var(--text-primary);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--text-primary);
}

.article-body code {
  font-family: var(--font-mono);
  background-color: var(--bg-tertiary);
  padding: 2px 6px;
  font-size: 0.88rem;
  border-radius: 2px;
}

.article-body pre {
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  padding: 1.2rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 1.5rem 0;
}

/* Button & Link Hover Animations */
.editorial-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-serif);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 24px;
  border: 1px solid var(--accent-noir);
  background-color: var(--accent-noir);
  color: var(--text-inverted);
  transition: var(--transition-snap);
  cursor: pointer;
}

.editorial-btn:hover {
  background-color: transparent;
  color: var(--text-primary);
}

.editorial-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-serif);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 24px;
  border: 1px solid var(--border-strong);
  background-color: transparent;
  color: var(--text-primary);
  transition: var(--transition-snap);
  cursor: pointer;
}

.editorial-btn-outline:hover {
  border-color: var(--accent-noir);
  background-color: var(--accent-noir);
  color: var(--text-inverted);
}

/* Interactive Estimator Slider / Inputs */
input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 2px;
  background: var(--border-strong);
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-primary);
  cursor: pointer;
  transition: transform 0.15s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.3);
}

/* Search Dialog Overlay */
#searchModal {
  transition: opacity 0.25s ease;
}

/* Studio Watermark & Monogram */
.monogram {
  font-family: var(--font-serif);
  letter-spacing: -0.05em;
  font-weight: 700;
}

/* Smooth fade in */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Video Thumbnail Showcase (Image Reference 2 & 3) */
.video-card-container {
  border-radius: 1.5rem; /* rounded-3xl */
  overflow: hidden;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.12);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

[data-theme="dark"] .video-card-container {
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.6);
}

.video-card-container:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.22);
}

.watch-fullscreen-btn {
  background: rgba(15, 15, 15, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.watch-fullscreen-btn:hover {
  background: rgba(15, 15, 15, 0.88);
  border-color: rgba(255, 255, 255, 0.45);
}

.sound-toggle-btn {
  background: rgba(15, 15, 15, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.sound-toggle-btn:hover {
  background: rgba(15, 15, 15, 0.88);
  border-color: rgba(255, 255, 255, 0.45);
}

/* Fullscreen Expandable Cinema Theater */
#cinemaTheaterModal {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  background-color: rgba(6, 6, 6, 0.96);
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   HERO BOOK PAGE ACCORDION (Mobile-First: Vertical Chapters -> Desktop Spines)
   ========================================================================== */
#heroBookAccordion {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  background-color: #050505;
}

@media (min-width: 768px) {
  #heroBookAccordion {
    flex-direction: row;
  }
}

.book-page-panel {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  cursor: pointer;
  will-change: flex, min-height, max-height, min-width, max-width;
  transition: flex 0.65s cubic-bezier(0.16, 1, 0.3, 1), 
              min-height 0.65s cubic-bezier(0.16, 1, 0.3, 1), 
              max-height 0.65s cubic-bezier(0.16, 1, 0.3, 1), 
              min-width 0.75s cubic-bezier(0.16, 1, 0.3, 1), 
              max-width 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s ease;
}

@media (min-width: 768px) {
  .book-page-panel {
    width: auto;
    height: 100%;
  }
}

/* Mobile-First Collapsed Chapter Bar (Horizontal compact chapter strip) */
.book-page-panel.is-collapsed {
  flex: 0 0 68px;
  min-height: 68px;
  max-height: 68px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 -10px 25px -5px rgba(0, 0, 0, 0.85), inset 0 1px 4px rgba(255, 255, 255, 0.12);
  transition: flex 0.65s cubic-bezier(0.16, 1, 0.3, 1), 
              min-height 0.65s cubic-bezier(0.16, 1, 0.3, 1), 
              max-height 0.65s cubic-bezier(0.16, 1, 0.3, 1), 
              min-width 0.75s cubic-bezier(0.16, 1, 0.3, 1), 
              max-width 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s ease,
              border-color 0.4s ease;
}

@media (min-width: 640px) {
  .book-page-panel.is-collapsed {
    flex: 0 0 76px;
    min-height: 76px;
    max-height: 76px;
  }
}

/* Desktop Horizontal Book Spine Override */
@media (min-width: 768px) {
  .book-page-panel.is-collapsed {
    flex: 0 0 80px;
    min-width: 80px;
    max-width: 80px;
    min-height: 0;
    max-height: none;
    border-top: none;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
    border-right: 1px solid rgba(0, 0, 0, 0.6);
    box-shadow: -15px 0 35px -5px rgba(0, 0, 0, 0.95), inset 1px 0 4px rgba(255, 255, 255, 0.12);
  }
}

@media (min-width: 1024px) {
  .book-page-panel.is-collapsed {
    flex: 0 0 94px;
    min-width: 94px;
    max-width: 94px;
  }
}

@media (min-width: 1440px) {
  .book-page-panel.is-collapsed {
    flex: 0 0 108px;
    min-width: 108px;
    max-width: 108px;
  }
}

/* Luminous Glow & Generous Expansion on Hover when Collapsed (Desktop & Fine Pointer) */
@media (min-width: 768px) {
  .book-page-panel.is-collapsed:hover {
    flex: 0 0 330px;
    min-width: 330px;
    max-width: 330px;
    border-left: 1.5px solid rgba(255, 255, 255, 0.9);
    box-shadow: -12px 0 35px rgba(255, 255, 255, 0.28), 
                0 0 45px rgba(255, 255, 255, 0.18), 
                inset 4px 0 24px rgba(255, 255, 255, 0.32),
                inset 0 0 30px rgba(255, 255, 255, 0.08);
    cursor: pointer;
    z-index: 15;
  }

  .book-page-panel.is-collapsed:hover .panel-video {
    filter: brightness(0.95) contrast(1.1);
    transform: scale(1.04);
  }
}

@media (min-width: 1024px) {
  .book-page-panel.is-collapsed:hover {
    flex: 0 0 380px;
    min-width: 380px;
    max-width: 380px;
  }
}

@media (min-width: 1440px) {
  .book-page-panel.is-collapsed:hover {
    flex: 0 0 420px;
    min-width: 420px;
    max-width: 420px;
  }
}

/* Mobile-First Spine Title: Always visible on mobile horizontal bars, hover-revealed on desktop spines */
.spine-hover-title {
  writing-mode: horizontal-tb;
  transform: translateY(0);
  white-space: normal;
  opacity: 1;
  pointer-events: none;
  width: 100%;
  min-width: 0;
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  color: #ffffff;
}

@media (min-width: 768px) {
  .spine-hover-title {
    transform: translateY(14px);
    opacity: 0;
  }

  .book-page-panel.is-collapsed:hover .spine-hover-title {
    opacity: 1;
    transform: translateY(0);
  }
}

.spine-hover-hint {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.4s ease;
}

.book-page-panel.is-collapsed:hover .spine-hover-hint {
  opacity: 0.9;
  transform: translateY(0);
}

.book-page-panel.is-collapsed .spine-top-badge {
  align-self: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.book-page-panel.is-collapsed:hover .spine-top-badge {
  align-self: flex-start;
  border-color: rgba(255, 255, 255, 0.95);
  background-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.6), inset 0 0 8px rgba(255, 255, 255, 0.5);
  color: #ffffff;
}

.book-page-panel.is-collapsed:hover .spine-bottom-indicator {
  color: #ffffff;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.9);
}

.book-page-panel.is-collapsed:hover .spine-bottom-dot {
  background-color: #ffffff;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.95), 0 0 28px rgba(255, 255, 255, 0.6);
  transform: scale(1.4);
}

/* Pulsing Spine Edge Glow Bar */
.book-spine-glow-bar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 2.5px;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.95) 25%, rgba(255, 255, 255, 0.7) 75%, transparent 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, box-shadow 0.4s ease;
  box-shadow: 0 0 18px 4px rgba(255, 255, 255, 0.8), 0 0 30px 6px rgba(255, 255, 255, 0.3);
}

@media (min-width: 768px) {
  .book-page-panel.is-collapsed:hover .book-spine-glow-bar {
    opacity: 1;
  }
}

/* Expanded Book Page (Unfolded Stage) */
.book-page-panel.is-expanded {
  flex: 1 1 0%;
  min-width: 0;
  min-height: 0;
  cursor: pointer;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.9);
}

@media (min-width: 768px) and (pointer: fine) {
  .book-page-panel.is-expanded,
  .book-page-panel.is-expanded * {
    cursor: none;
  }
}

/* Floating Play-in-Fullscreen Cursor Follower (Desktop Fine Pointer) */
#heroVideoCursor {
  will-change: transform, opacity;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.08s ease-out;
}

#heroVideoCursor.is-active {
  opacity: 1;
}

/* Panel Background Video / YouTube Embed Cover Container */
.book-page-panel .panel-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  container-type: size;
  object-fit: cover;
  pointer-events: none;
  filter: brightness(0.65) contrast(1.05);
  transition: filter 0.6s ease, transform 0.8s ease;
}

.book-page-panel.is-expanded .panel-video {
  filter: none;
}

@media (min-width: 768px) {
  .book-page-panel.is-collapsed:hover .panel-video {
    filter: brightness(0.8) contrast(1.08);
  }
}

/* True 16:9 Mathematical Object-Cover for Background YouTube Iframe across Mobile Portrait & Desktop Ultrawide */
.book-page-panel .panel-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100cqw, calc(100cqh * 1.7778));
  height: max(100cqh, calc(100cqw * 0.5625));
  transform: translate(-50%, -50%) scale(1.18);
  border: none;
  pointer-events: none;
}

/* Panel Poster Thumbnail Image (Returns when collapsed) */
.book-page-panel .panel-poster-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 5;
  opacity: 1;
  pointer-events: none;
  filter: brightness(0.5) contrast(1.08);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
              filter 0.5s ease, 
              transform 0.6s ease;
}

@media (min-width: 768px) {
  .book-page-panel .panel-poster-img {
    filter: brightness(0.65) contrast(1.05);
  }
}

.book-page-panel.is-expanded .panel-poster-img {
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 768px) {
  .book-page-panel.is-collapsed:hover .panel-poster-img {
    filter: brightness(0.95) contrast(1.1);
    transform: scale(1.04);
  }
}

/* Vertical Spine Rotated Typography */
.book-spine-tab {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

/* Collapsed vs Expanded Content Visibility & Transitions */
.book-page-panel .panel-collapsed-view {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease 0.1s, visibility 0.35s ease;
}

.book-page-panel.is-expanded .panel-collapsed-view {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.book-page-panel .panel-expanded-view {
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

.book-page-panel.is-expanded .panel-expanded-view {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.18s, 
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.18s,
              visibility 0.55s ease 0.18s;
}

/* Book page crease shadow overlay for the spine */
.spine-crease-overlay {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.5) 100%);
  opacity: 1;
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) {
  .spine-crease-overlay {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 30%, transparent 100%);
  }
}

.panel-cinematic-overlay {
  opacity: 1;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Mobile-First Expanded View: Scrim & concise caption remain readable on touchscreens;
   Desktop (@media (min-width: 768px) and (hover: hover)) keeps pure playback until hovered */
.book-page-panel.is-expanded .panel-cinematic-overlay {
  opacity: 0.85 !important;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.book-page-panel.is-expanded .spine-crease-overlay {
  opacity: 0 !important;
  pointer-events: none;
}

.book-page-panel.is-expanded .panel-expanded-view p,
.book-page-panel.is-expanded .panel-expanded-desc {
  opacity: 0.95 !important;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) and (hover: hover) {
  .book-page-panel.is-expanded .panel-cinematic-overlay {
    opacity: 0 !important;
  }
  .book-page-panel.is-expanded:hover .panel-cinematic-overlay {
    opacity: 0.9 !important;
  }
  .book-page-panel.is-expanded .panel-expanded-view p,
  .book-page-panel.is-expanded .panel-expanded-desc {
    opacity: 0 !important;
    transform: translateY(10px);
    pointer-events: none;
  }
  .book-page-panel.is-expanded:hover .panel-expanded-view p,
  .book-page-panel.is-expanded:hover .panel-expanded-desc {
    opacity: 1 !important;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* Horizontal Scrolling Logos Marquee — JS-Driven Infinite Loop & Interactive Drag */
.horizontal-marquee-container {
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  width: 100%;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  scrollbar-width: none;
  -ms-overflow-style: none;
  mask-image: linear-gradient(to right, transparent 0%, black 3.5%, black 96.5%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3.5%, black 96.5%, transparent 100%);
}

@media (min-width: 768px) {
  .horizontal-marquee-container {
    mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  }
}

.horizontal-marquee-container::-webkit-scrollbar {
  display: none;
}

.horizontal-marquee-container.is-dragging {
  cursor: grabbing !important;
}

.horizontal-marquee-track {
  display: flex;
  width: max-content;
}

/* Collective / Sister Entities Section Typography */
#collective .font-serif,
#collective p {
  font-family: var(--font-serif) !important;
}

#collective h2 {
  font-family: var(--font-brand) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  font-stretch: expanded !important;
  letter-spacing: -0.01em;
}

#collective .logo-marquee-item .font-brand {
  font-family: var(--font-brand) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-stretch: expanded !important;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   MORE WORKS HORIZONTAL SHOWCASE (Mobile-First Touch Snap -> Desktop Wheel Glide)
   ========================================================================== */

#moreWorksTrack {
  gap: 12px !important;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 1rem;
}

@media (min-width: 640px) {
  #moreWorksTrack {
    gap: 16px !important;
    scroll-padding-left: 2rem;
  }
}

@media (min-width: 768px) {
  #moreWorksTrack {
    scroll-snap-type: none;
  }
}

.more-work-card {
  width: min(78vw, 310px);
  aspect-ratio: 1 / 1;
  border-radius: 0 !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  will-change: transform, box-shadow;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .more-work-card {
    width: 360px;
  }
}

@media (min-width: 1024px) {
  .more-work-card {
    width: 440px;
  }
}

@media (min-width: 1440px) {
  .more-work-card {
    width: 480px;
  }
}

.font-brand {
  font-family: var(--font-brand) !important;
}

/* More Works Section Typography */
#moreWorks {
  font-family: var(--font-serif);
}

#moreWorks h2 {
  font-family: var(--font-brand) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  font-stretch: expanded !important;
  letter-spacing: -0.01em;
}

#moreWorks .more-works-eyebrow {
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: 0.08em;
}

#moreWorks .more-work-card p.font-brand {
  font-family: var(--font-brand) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-size: 0.5rem !important;
  letter-spacing: 0.12em !important;
  opacity: 0.85;
}

#moreWorks .more-work-card h3 {
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: 0.01em;
}

/* Light Mode Hover Glow */
.more-work-card:hover {
  transform: translateY(-5px);
  border-color: rgba(17, 17, 17, 0.75);
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.18),
              0 0 45px rgba(0, 0, 0, 0.08),
              0 18px 36px -10px rgba(0, 0, 0, 0.16);
}

/* Dark Mode Hover Luminous Bloom Glow (Pure White / Ambient Luminescence — No Green Tint) */
[data-theme="dark"] .more-work-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.45),
              0 0 55px rgba(255, 255, 255, 0.22),
              0 0 80px rgba(255, 255, 255, 0.1),
              0 20px 40px -10px rgba(0, 0, 0, 0.85);
}

/* Inner Glow highlight on hover */
.more-work-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.3);
  transition: opacity 0.35s ease;
  z-index: 15;
}

.more-work-card:hover::after {
  opacity: 1;
}

/* Hide scrollbar utility */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Horizontal Track - Smooth Mouse Drag & Native Scroll */
#moreWorksTrack {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  scroll-behavior: auto;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}

#moreWorksTrack.is-dragging {
  cursor: grabbing !important;
}

#moreWorksTrack.is-dragging .more-work-card {
  pointer-events: none;
}

/* ==========================================================================
   FOOTER TYPOGRAPHY & HOVER INTERACTIONS (EXPANDED & GLOW)
   ========================================================================== */
footer a.footer-link,
footer .footer-link {
  display: inline-block;
  transform-origin: left center;
  font-stretch: normal;
  letter-spacing: 0.02em;
  transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              letter-spacing 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              text-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              font-weight 0.2s ease;
}

footer a.footer-link:hover,
footer .footer-link:hover {
  color: var(--text-primary) !important;
  font-stretch: expanded;
  font-weight: 700;
  letter-spacing: 0.06em;
  transform: scaleX(1.03);
  text-shadow: var(--footer-text-glow);
}