/* =========================================
   1. CORE VARIABLES (Slimmed Down)
   ========================================= */
:root {
  --component-padding: 1.25em;
  --radius: 0.25em;
  --radius-lg: 0.5em;
}

/* =========================================
   2. CARD LAYOUT UTILITIES
   ========================================= */
/* Force navigation to the front */
#luchen-global-nav, header, .site-header {
  z-index: 999999 !important; 
}

.card-3d-layer .text-component h3 {
    color: #D3D2D0 !important; /* Change this to #D4AF37 for gold, or any color you like */
    text-shadow: 0 1.5px 6px rgba(0, 0, 0, 0.5) !important; /* Optional: Adds a soft drop shadow to make it pop off the glass */
    font-weight: 500 !important;
}

/* Optional: If you want to change the subtitle color under the name too */
/*.card-3d-layer .text-component p.display\@xs {
    color: #EAEAEA !important; 
}*/


.cardcontainer { width: calc(100% - 2*var(--component-padding)); margin-left: auto; margin-right: auto; }
.max-width-adaptive-sm { max-width: 48rem; }
.max-width-adaptive-md { max-width: 64rem; }

.card-grid { --grid-gap: 0px; display: flex; flex-wrap: wrap; height: 100%; }
.cardcol-6 { flex-basis: calc(50% - 0.01px - var(--grid-gap, 1em)); max-width: calc(50% - 0.01px - var(--grid-gap, 1em)); }

.flex { display: flex; }
.items-center { align-items: center; }
.block { display: block; }
.width-100\% { width: 100%; }
.height-100\% { height: 100%; }
.object-cover { object-fit: cover; }
.padding-md { padding: 1.25em; }
.padding-y-xl { padding-top: 3.25em; padding-bottom: 3.25em; }
.margin-bottom-lg { margin-bottom: 2em; }
.text-center { text-align: center; }

/* Custom Spacing for Page Title */
.text-xxxl { 
   font-size: 2.488em; 
   margin-top: 200px !important; 
   margin-bottom: 150px !important;
}

/* Hide element on small screens */
@media not all and (min-width: 32rem) {
  .display\@xs { display: none !important; }
}

/* =========================================
   NARROW EDITORIAL TEXT (Using Jost)
   ========================================= */
.narrow-editorial p {
    font-family: var(--jost-font) !important; 
    font-weight: 300 !important; /* Light weight makes it look slimmer */
    letter-spacing: -0.02em !important; /* Tightens the width slightly */
}

/* Make sure the highlighted markers match the new font */
.narrow-editorial p mark.hx {
    font-family: inherit !important;
}

/* =========================================
   3. BUTTONS
   ========================================= */
.card-3d-layer .btn { 
  position: relative; display: inline-flex; justify-content: center; align-items: center; 
  white-space: nowrap; text-decoration: none; padding: 0.5em 1.25em; 
  border-radius: var(--radius); cursor: pointer; transition: all 0.3s ease; 
  box-shadow: 0px 2px 8px 0 rgba(0,0,0,0.12); 
  background-color: hsla(215,69%,44%,1.00); color: #fff; 
}
.card-3d-layer .btn:hover { background-color: hsla(40,84%,54%,1.00); }

/* =========================================
   4. STACK CARDS & 3D AERO GLASS EFFECT
   ========================================= */
.stack-cards { --stack-cards-gap: 0px; margin: 0; padding: 0; }

.stack-cards__item {
  position: -webkit-sticky; position: sticky;
  top: 175px; height: 0; padding-bottom: 60%;
  perspective: 1200px; perspective-origin: center bottom;
  background-color: transparent !important; border: none !important; box-shadow: none !important;
}

.card-3d-layer {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  transform-origin: center bottom;
  --card-tilt: -20deg; 
  transform: rotateX(var(--card-tilt)) scale(0.98); 
  border-radius: var(--radius-lg); overflow: hidden;
  transition: transform 0.56s cubic-bezier(0.165, 0.84, 0.44, 1);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
  backdrop-filter: blur(24px) !important; -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 12px 40px 0 rgba(0, 0, 0, 0.4) !important;
}

.stack-cards__item.is-stacked .card-3d-layer { --card-tilt: 0deg; }

/* =========================================
   5. 3-COLOR MESH AMBIENT BACKGROUND
   ========================================= */
.ambient-background {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: -2; background-color: #0f172a; overflow: hidden;
}
.color-orb {
  position: absolute; border-radius: 50%; filter: blur(120px); 
  opacity: 0.6; transition: background-color 0.6s ease-out;
}
.orb-1 { top: -10%; left: -10%; width: 55vw; height: 55vw; background-color: var(--color-1, #1a1a24); }
.orb-2 { top: 40%; right: -10%; width: 65vw; height: 65vw; background-color: var(--color-2, #1a1a24); }
.orb-3 { bottom: -20%; left: 10%; width: 70vw; height: 70vw; background-color: var(--color-3, #1a1a24); }

/* Scroll-away cover */
body::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 130vh; 
  background: linear-gradient(to bottom, #385DCE 40%, rgba(56, 93, 206, 0) 100%);
  z-index: -1; pointer-events: none; 
}

/* =========================================
   6. MAC OS EXPAND MODAL
   ========================================= */
.mac-modal-overlay {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999;
  pointer-events: none; opacity: 0; visibility: hidden; 
  background: rgba(0,0,0,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  perspective: 800px; transition: opacity 0.7s ease, visibility 0.6s ease; 
}
.mac-modal-overlay.is-active { opacity: 1; pointer-events: all; visibility: visible; }

.mac-modal-content {
  position: fixed; z-index: 10000; overflow-y: auto; opacity: 0;
  transform: translateY(35vh) rotateX(-35deg) scale(0.8); transform-origin: center top;
  transition: opacity 0.4s ease, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.mac-modal-close {
  position: absolute; top: 20px; right: 20px; width: 36px !important; height: 36px !important; border-radius: 40%;
  color: #D4AF37 !important; background: rgba(0, 0, 0, 0.15) !important; border: 1px solid rgba(0, 0, 0, 0.2) !important;
  cursor: pointer; display: flex; justify-content: center; align-items: center; z-index: 10;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
.mac-modal-close span { font-size: 50px !important; line-height: 1; }
.mac-modal-close:hover { background: rgba(0, 0, 0, 0.3) !important; transform: scale(1.37) rotate(45deg) !important; box-shadow: 0 0 4px rgba(38,154,255,0.80) !important; border: 1px solid rgba(64,74,253,0.9) !important; }
.mac-modal-close:active { transform: scale(0.9) rotate(-45deg) !important; box-shadow: 0 0 5px rgba(212, 175, 55, 0.2) !important; }

/* The Expanded State */
.mac-modal-overlay.is-active .mac-modal-content {
  top: 5vh !important; left: 5vw !important; width: 90vw !important; height: 90vh !important; border-radius: 12px !important;
  opacity: 1 !important; transform: translateY(35vh) rotateX(-35deg) scale(0.8) !important;
  background: linear-gradient(360deg, rgba(60, 130, 255, 0.25) 0%, rgba(30, 90, 220, 0.08) 50%, rgba(10, 30, 100, 0.02) 100%) !important;
  backdrop-filter: blur(32px) saturate(120%) !important; -webkit-backdrop-filter: blur(32px) saturate(120%) !important;
  border: none !important; 
  box-shadow: inset 0.05px 0.5px 0px 0.1px rgba(180, 230, 255, 0.7), inset 0px 0px 0px 0.1px rgba(80, 160, 255, 0.25), 0px 0px 0px 1px rgba(10, 25, 70, 0.6), 0 32px 80px rgba(0, 0, 0, 0.7) !important;
    
/* THE FIX: Lock the outer container so the background doesn't move or fade */
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important; 

  /* Clear the broken mask */
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* 2. The Inner Scroll Area (Handles scroll AND gets the mask) */
.mac-modal-overlay.is-expanded .mac-modal-body { 
  opacity: 1; transform: translateY(0); transition: all 0.4s ease 0.3s;
  
  /* Make this the new scrolling area */
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: 100% !important;

  /* Apply mask here! The transparent background means ONLY the text fades */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0px, black 100px, black calc(100% - 120px), transparent 100%) !important;
  mask-image: linear-gradient(to bottom, transparent 0px, black 100px, black calc(100% - 120px), transparent 100%) !important;
}


/* Stage 2: Flat Arrival */
.mac-modal-overlay.is-active.is-expanded .mac-modal-content { transform: translateY(0vh) rotateX(0deg) scale(1) !important; }

/* Modal Body Fades */
.mac-modal-body { opacity: 0; transform: translateY(20px); transition: all 0.3s ease 0.2s; }
.mac-modal-overlay.is-expanded .mac-modal-body { opacity: 1; transform: translateY(0); transition: all 0.4s ease 0.3s; }

/* Clearfix for dynamic content */
.js-mac-modal-dynamic-content::after { content: ""; display: table; clear: both; }

/* =========================================
   7. TEXT HIGHLIGHT EFFECTS (Splitting.js)
   ========================================= */

/* 1. Stop mobile browsers from deleting the spaces between words */
.splitting .word, .splitting .char { display: inline-block; }
.splitting .whitespace { 
    display: inline-block !important; 
    white-space: pre !important; 
    width: 0.25em; 
}

/* 2. Fallback State (Ensures it stays Gold instead of gray if JS pauses) */
mark.hx { 
    background: transparent; 
    padding: 0; 
    color: #D4AF37 !important; 
}

/* 3. The Active Gradient (Forces parity between Desktop & Mobile) */
.hx .char {
    background: linear-gradient(135deg, #D4AF37 0%, #FFF8E7 50%, #B48C28 100%) !important;
    background-size: 200% auto !important; 
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important; 
}

/* Specific Effect UI Styling */
.hx-5 { position: relative; --after-scale: 0; }
.hx-5::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #D4AF37 0%, #FFF8E7 50%, #B48C28 100%); border-radius: 2px; transform: scaleX(var(--after-scale)); transform-origin: left center; }

.hx-6 { position: relative; --after-width: 0%; }
.hx-6::after { content: ''; position: absolute; top: 0; left: -2px; height: 100%; width: var(--after-width); background: rgba(212, 175, 55, 0.15); border-radius: 4px; z-index: -1; }

.hx-7 { position: relative; --after-height: 0%; }
.hx-7::after { content: ''; position: absolute; bottom: -2px; left: -2px; width: calc(100% + 4px); height: var(--after-height); background: rgba(212, 175, 55, 0.15); border-radius: 4px; z-index: -1; }

.hx-13 { position: relative; --select-width-final: 100%; }
.hx__select { position: absolute; top: 0; left: -4px; height: 100%; width: var(--select-width, 0%); background: rgba(212, 175, 55, 0.25); border-radius: 4px; z-index: -1; 
}



/* =========================================
   EXTERNAL ARTICLE THUMBNAIL CARD
   ========================================= */
.editorial-link-card {
    display: block;
    max-width: 450px; /* Matches your other image widths */
    margin: 40px auto 30px auto;
    border-radius: 12px;
    text-decoration: none !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
}

/* Float logic to allow text to wrap around it on Desktop, just like your other images */
@media (min-width: 1025px) {
    .editorial-link-card {
        float: right;
        margin: 10px 0 20px 40px;
    }
}

/* Hover Physics */
.editorial-link-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 16px 40px rgba(0,0,0,0.3), 0 0 20px rgba(212, 175, 55, 0.2);
}

.editorial-link-image {
    position: relative;
    width: 100%;
    border-radius: 12px;
}

.editorial-link-image img {
    width: 100%;
    display: block;
    border-radius: 12px;
}

/* The Glass Label at the bottom of the thumbnail */
.editorial-link-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(10, 15, 30, 0.80);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 16px 20px;
    text-align: center;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* The Gold Text */
.editorial-link-overlay span {
    color: #D4AF37;
    font-family: var(--jost-font), sans-serif;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.editorial-link-card:hover .editorial-link-overlay span {
    color: #FFF8E7; /* Brightens when hovered */
}

/* =========================================
   INTERACTIVE ARTICLE INDICATOR & LAYOUT
   ========================================= */
/* 1. Make the anchor tag itself act as the layout container */
a.interactive-article-link {
    position: relative;
    display: block !important;
    overflow: hidden; /* Keeps the glass banner clipped inside the rounded corners */
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    text-decoration: none !important;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease !important;
}

/* 2. Format the image to fill the container perfectly */
a.interactive-article-link img {
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
    float: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* 3. The Glass Indicator Banner */
.article-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(10, 15, 30, 0.80);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 16px 20px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.article-indicator span {
    color: #D4AF37;
    font-family: var(--jost-font), sans-serif;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

/* Hover Physics */
a.interactive-article-link:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,0.3), 0 0 20px rgba(212, 175, 55, 0.2) !important;
}
a.interactive-article-link:hover .article-indicator span {
    color: #FFF8E7;
}

/* =========================================
   ARTICLE RESPONSIVE SIZING
   ========================================= */
/* Desktop Layout (Mimics modal-img-left) */
@media (min-width: 1025px) {
    a.interactive-article-link {
        float: left !important;
        max-width: 400px !important;
        width: 100% !important;
        margin: 10px 40px 20px 0 !important;
    }
}

/* Tablet Layout */
@media (max-width: 1024px) {
    a.interactive-article-link {
        float: left !important;
        max-width: 45% !important;
        margin: 10px 30px 20px 80px !important;
    }
}

/* Mobile Layout */
@media (max-width: 600px) {
    a.interactive-article-link {
        float: none !important;
        max-width: 100% !important;
        width: calc(100% - 50px) !important; /* Prevents frame clipping */
        margin: 30px auto !important;
    }
}
/* =========================================
   8. RESPONSIVE DESIGN & ALIGNMENT
   ========================================= */
@media (min-width: 1025px) {
    /* =========================================
       MAGAZINE EDITORIAL LAYOUT (Desktop)
       ========================================= */
    .card-3d-layer .cardcol-6 .text-component {
        padding-left: 13% !important;
        padding-right: 5% !important; 
    }
    /* 1. Widen layout and use block display to allow text wrapping */
    .js-mac-modal-dynamic-content { 
        display: block; 
        max-width: 1040px; /* Widened ~30% from 800px */
        margin: 0 auto;
        padding-bottom: 160px; 
    }

    /* 2. Match the widened layout for the title */
    .mac-modal-body h1.js-mac-modal-title { 
        margin: 100px auto 100px auto !important; 
        max-width: 1040px; 
        text-align: center; 
        color: #84753A !important; 
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) !important; 
        font-weight: 600; 
    }

    /* 3. Justify the text for that crisp, editorial magazine edge */
    .mac-modal-body p { 
        margin: 50px auto 30px auto !important; 
        max-width: 1280px; 
        padding-top: 0 !important; 
        text-align: justify; /* Magazine text wrapping */
        color: #999999 !important; 
        font-size: 1.5rem !important; 
        line-height: 1.8 !important; 
        text-shadow: 0px 0.3px 0.3px rgba(236,245,255,1.00) !important; 
    }
    .mac-modal-body .hx .char, .hx .char {
    text-shadow: none !important; 
    }

/* 4. Float the left image/link so text wraps on the right */
    .mac-modal-body img.modal-img-left,
    .mac-modal-body a.modal-img-left { 
        display: block !important; 
        float: left !important; 
        max-width: 400px !important; 
        width: 100% !important; 
        margin: 30px 40px 20px 0 !important; 
        border-radius: 12px; 
        box-shadow: 0 8px 24px rgba(0,0,0,0.15); 
    }

    /* 5. Float the right image/link so text wraps on the left */
    .mac-modal-body img.modal-img-right,
    .mac-modal-body a.modal-img-right { 
        display: block !important; 
        float: right !important; 
        max-width: 450px !important; 
        width: 100% !important; 
        margin: 30px 0 20px 40px !important; 
        border-radius: 12px; 
        box-shadow: 0 8px 24px rgba(0,0,0,0.15); 
    }

}

@media (max-width: 1024px) {
  /* =========================================
     TABLET: Mini-Magazine Layout
     ========================================= */
  .card-3d-layer .btn { padding: 8px 16px !important; font-size: 0.9rem !important; } 
  .cardcontainer.max-width-adaptive-md { width: auto !important; margin-left: 8vw !important; margin-right: 8vw !important; }  
    
   .card-3d-layer .cardcol-6 .text-component {
        padding-left: 13% !important;
        padding-right: 5% !important; /* Optional: prevents text from touching the image edge */
    }    
  /* Symmetrical, centered title */
  .mac-modal-body h1.js-mac-modal-title { 
      color: #84753A !important; 
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) !important; 
      font-weight: 600 !important; 
      margin: 120px auto 40px auto !important; 
      padding: 0 40px !important;
      text-align: center !important;
  }

   .mac-modal-body h3 { 
     margin: 0 50px 25px 50px !important; 
      padding: 0 25px !important; 
      font-size: 1.5rem !important; 
       text-align: justify;
    }
    
  /* Justified text, eliminating negative margins to prevent overlap */
  .mac-modal-body p { 
      color: #999999 !important; 
      text-shadow: 0px 0.75px 0.75px rgba(255,255,255,1.0) !important; 
      font-size: 1.15rem !important; 
      line-height: 1.6 !important; 
     margin: 0 50px 25px 50px !important; 
      padding: 0 25px !important;
      text-align: justify !important; /* Maintains the editorial edge */
  }
    .mac-modal-body .hx .char, .hx .char {
    text-shadow: none !important; 
    }
    
/* Alternating floats for iPads */
  .mac-modal-body img.modal-img-left,
  .mac-modal-body a.modal-img-left { 
      float: left !important; 
      max-width: 45% !important; 
      margin: 10px 30px 20px 80px !important; 
      border-radius: 8px; 
  }
  .mac-modal-body img.modal-img-right,
  .mac-modal-body a.modal-img-right { 
      float: right !important; 
      max-width: 45% !important; 
      margin: 10px 40px 20px 30px !important; 
      border-radius: 8px; 
  }
     
}
    /* =========================================
       INSIGHT TEXT (Desktop Default)
       ========================================= */
    .responsive-insight-text {
        font-size: 1.8rem;
        margin-top: 100px;
    }

@media (max-width: 600px) {
  /* =========================================
     MOBILE: Elegant Stacked Editorial
     ========================================= */
    .responsive-insight-text {
      font-size: 1.4rem;
      margin-top: 60px; /* Reduced from 100px so it doesn't leave a huge blank space */
  }
    
  .mac-modal-body h1.js-mac-modal-title { 
      margin: 80px auto 30px auto !important; 
      padding: 0 25px !important; 
        color: #84753A !important; 
    }
   .mac-modal-body h3 { 
     margin: 0 auto 25px auto !important; 
      padding: 0 25px !important; 
      font-size: 1.5rem !important; 
       text-align: justify;
    }
  .mac-modal-body p { 
      margin: 0 auto 25px auto !important; 
      padding: 0 25px !important; 
      font-size: 1.05rem !important;
  }
    .mac-modal-body .hx .char, .hx .char {
    text-shadow: none !important; 
    }
    
/* Force the article card to respect mobile padding */
  .editorial-link-card { 
      float: none !important; 
      width: calc(100% - 50px) !important; /* Keeps it perfectly aligned with your text */
      margin: 30px auto 60px auto !important; /* Added extra bottom margin so it fully clears the fade mask when you scroll all the way down */
      display: block !important; 
  }
/* Full-width elegant images/links, clearing all floats */
  .mac-modal-body img.modal-img-left, 
  .mac-modal-body img.modal-img-right,
  .mac-modal-body a.modal-img-left,
  .mac-modal-body a.modal-img-right { 
      float: none !important; 
      max-width: 100% !important; 
      width: calc(100% - 50px) !important; 
      margin: 30px auto !important; 
      display: block !important; 
      box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
  }
}