.label-symbols {
  letter-spacing: -1px;
  font-family: monospace;
}
.label-container-symbols {
  justify-self: end;
  text-align: right;
}

/* 確保 section heading 的 year 文字對齊網格右緣 */
.section-heading-grid .align-r {
  text-align: right !important;
  justify-self: end !important;
  display: block !important;
}

.gradient-canvas {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          z-index: -1;
          /* GPU 加速：獨立合成層，減少 repaint */
          will-change: transform;
          contain: strict;
        }
        .hero-logo-container {
          position: relative;
          min-height: 400px; /* Ensure there's space if content is small */
        }
        .divider.hero-divider {
          display: none !important;
        }
        /* 統一：section 頂部的 divider 全部隱藏，與 Projects 一致 */
        #projects .container > .divider,
        #about .container > .divider,
        #photography .container > .divider {
          display: none !important;
        }
        /* 行動裝置：點陣波浪當背景，logo 與 nav 疊在上面 */
        .hero-top-wrapper {
          position: relative;
        }
        .hero-mobile-wave-bg {
          display: none;
          position: absolute;
          inset: 0;
          z-index: 0;
          overflow: hidden;
          /* 確保在 IG 內置瀏覽器中繪圖層更穩定 */
          -webkit-transform: translateZ(0);
          transform: translateZ(0);
          backface-visibility: hidden;
        }
        @media screen and (max-width: 767px) {
          .hero-logo-container {
            display: none !important;
          }
          .hero-mobile-wave-bg {
            display: block;
          }
          .hero-top-wrapper .hero-section {
            background-color: transparent;
          }
          .hero-top-wrapper .navbar {
            background-color: transparent !important;
            -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
            margin-top: 0 !important;
            padding-top: 24px !important;
          }
          .hero-top-wrapper .navbar .nav-container {
            margin-top: 0 !important;
          }
          .hero-top-wrapper .navbar .nav-menu {
            display: none !important;
          }
          .hero-top-wrapper {
            min-height: 45vh;
          }
          .hero-top-wrapper .hero-section {
            min-height: 30vh;
          }
          .hero-top-wrapper .navbar .brand .image {
            width: 32% !important;
          }
        }

        /* 行動裝置：統一各 section 內 title、desc 的 padding 與間距 */
        @media screen and (max-width: 767px) {
          #projects,
          #about,
          #photography,
          .footer {
            padding-top: 24px !important;
            padding-bottom: 0 !important;
          }
          #projects,
          #about,
          #photography {
            padding-top: 32px !important;
            padding-bottom: 32px !important;
          }
          #about {
            background-color: #0B0B0B !important;
          }
          .footer {
            margin-top: 0 !important;
          }
          #projects .container,
          #about .container,
          #photography .container,
          .footer .container {
            padding-left: 24px !important;
            padding-right: 24px !important;
          }
          #projects .container,
          #about .container,
          #photography .container {
            margin-top: 0 !important;
          }
          .section-heading-grid {
            margin-bottom: 1rem !important;
          }
          .section-heading-container {
            grid-row-gap: 1rem !important;
            margin-top: 0 !important;
          }
          .subheading {
            margin-top: 1rem !important;
          }
          .heading-outer-wrapper {
            margin-bottom: 0 !important;
          }
          ._12-column-grid.row-gap-large {
            margin-top: 0 !important;
          }
          .section-heading-grid .align-r {
            display: none !important;
          }
          .section-heading-grid {
            grid-template-columns: auto 1fr !important;
          }
          .section-heading-grid > *:nth-child(2) {
            grid-column: 2 !important;
            text-align: right !important;
            justify-self: stretch !important;
          }
          /* 確保 heading 的 year 對齊最右側 */
          .section-heading-grid .align-r {
            display: block !important;
            text-align: right !important;
            justify-self: end !important;
          }
        }

/* Make the projects section full width (100vw) */
      #projects {
          overflow-x: clip; /* Prevent horizontal scroll from 100vw */
          margin-top: 0;
          padding-top: 24px;
      }
      #projects > .container {
          margin-top: 0;
      }
      #projects .cases-wrapper {
          margin-top: 2rem;
          width: 100vw;
          margin-left: calc(50% - 50vw);
          position: relative;
      }

      /* List item rows */
      #projects .case-list-wrapper {
          display: flex;
          flex-direction: column;
      }

      #projects .collection-item {
          border-bottom: 1px solid rgba(255, 255, 255, 0.15);
          display: block;
          transition: border-color 0.3s ease;
      }
      
      #projects .collection-item:first-child {
          border-top: none;
      }

      #projects .collection-item:hover {
          border-bottom-color: #22FFC1;
      }

      #projects .project-wrapper {
          display: flex !important;
          flex-direction: row !important;
          align-items: flex-start !important;
          padding: 3rem 3rem !important;
          padding-top: 3rem !important;
          background: transparent !important;
          color: inherit;
          text-decoration: none;
          position: relative;
          cursor: pointer;
          overflow: hidden;
          width: 100%;
      }

      /* Grid: Arrow | Title | Category | Year - 明確欄位避免擠壓 */
      #projects .project-content-container {
          display: grid !important;
          grid-template-columns: 32px minmax(200px, 1fr) 200px 80px !important;
          grid-template-rows: auto !important;
          align-items: center !important;
          gap: 2rem 2.5rem !important;
          width: 100% !important;
          margin-top: 0 !important;
      }

      #projects .case-content-wrapper,
      #projects .project-title-container {
          display: contents !important;
      }

      #projects .case-arrow {
          grid-column: 1 !important;
          grid-row: 1 !important;
          width: 32px !important;
          transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
          opacity: 0.5;
      }

      #projects .case-title {
          grid-column: 2 !important;
          grid-row: 1 !important;
          font-size: clamp(1.25rem, 2.5vw, 2rem) !important;
          line-height: 1.2 !important;
          font-weight: 500;
          margin: 0 !important;
          min-width: 0 !important;
          word-break: break-word;
          transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
      }

      #projects .project-title-container .label {
          grid-column: 3 !important;
          grid-row: 1 !important;
          font-size: 1.1rem !important;
          font-weight: 500 !important;
          color: inherit !important;
          margin: 0 !important;
          text-align: left !important;
          white-space: nowrap;
          align-self: center !important;
      }

      #projects .case-year {
          grid-column: 4 !important;
          grid-row: 1 !important;
          text-align: right !important;
          margin: 0 !important;
          font-size: 1.1rem !important;
          font-weight: 300 !important; /* 與 heading year 的 grey-text 權重一致 */
          opacity: 0.6;
          white-space: nowrap;
          align-self: center !important;
          justify-self: end !important;
      }

      /* Hide original elements */
      #projects .project-image-wrapper { display: none !important; }
      #projects .divider-wrapper { display: none !important; }

      /* Hover effects */
      #projects .project-wrapper:hover .case-title {
          transform: translateX(20px);
          color: #fff; /* Highlight color on hover */
      }

      #projects .project-wrapper:hover .case-arrow {
          transform: translateX(10px) rotate(-45deg) !important;
          opacity: 1;
      }
      
      #projects .project-wrapper:hover {
          background: transparent !important; /* Wave bg shows instead */
      }

      /* Hover Rectangle */
      @media screen and (min-width: 1025px) {
          #projects .project-wrapper::after {
              content: "";
              position: absolute;
              bottom: 0;
              /* 3rem padding + 32px arrow + 2.5rem gap + 20px translateX = 140px */
              left: calc(5.5rem + 52px); 
              width: 88px;
              height: 3px;
              background-color: #22FFC1;
              opacity: 0;
              transition: opacity 0.3s ease;
              pointer-events: none;
              z-index: 2;
          }

          #projects .project-wrapper:hover::after {
              opacity: 1;
          }
      }

      /* Pixel wave background on hover - 填滿整個 list item */
      #projects .project-wave-bg {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          width: 100%;
          height: 100%;
          z-index: -1;
          overflow: hidden;
          pointer-events: none;
          opacity: 0;
          transition: opacity 0.35s ease;
      }
      #projects .project-wrapper:hover .project-wave-bg {
          opacity: 0.5;
      }
      #projects .project-wave-bg canvas {
          position: absolute;
          inset: 0;
          width: 100% !important;
          height: 100% !important;
      }

      /* Floating cursor image - 圖片的左下角位於游標右上方 */
      #cursor-image {
          position: fixed;
          top: auto;
          left: 0;
          bottom: 0;
          width: 18vw;
          min-width: 280px;
          height: auto;
          aspect-ratio: 4/3;
          pointer-events: none;
          z-index: 99990; /* 略低於 page-wipe (99999) 讓轉場時會被遮住 */
          opacity: 0;
          transform: scale(0.9);
          transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
          border-radius: 8px;
          overflow: hidden;
          will-change: transform, opacity, left, bottom;
          box-shadow: 0 20px 40px rgba(0,0,0,0.4);
      }

      #cursor-image.active {
          opacity: 1;
          transform: scale(1);
      }

      #cursor-image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
      }

      /* RWD: 991px 以下 - 與 container padding 一致，讓 year 對齊 section heading */
      @media screen and (max-width: 991px) {
          #projects .project-wrapper {
              padding: 2rem 1.5rem !important;
              align-items: flex-start !important;
          }
          #projects .project-content-container {
              grid-template-columns: 28px minmax(100px, 1fr) auto !important;
              grid-template-rows: auto auto !important;
              align-items: start !important;
              gap: 0.375rem 1.5rem !important;
          }
          #projects .case-arrow {
              width: 24px !important;
              grid-row: 1 / -1 !important;
              align-self: center !important;
          }
          #projects .case-title {
              grid-column: 2 !important;
              grid-row: 1 !important;
              font-size: clamp(1.125rem, 2.5vw, 1.5rem) !important;
              line-height: 1.3 !important;
          }
          #projects .project-title-container .label {
              grid-column: 2 !important;
              grid-row: 2 !important;
              font-size: 0.9rem !important;
              line-height: 1.4 !important;
              white-space: normal !important;
          }
          #projects .case-year {
              grid-column: 3 !important;
              grid-row: 1 / -1 !important;
              align-self: center !important;
              font-size: 0.95rem !important;
          }
          #cursor-image {
              display: none !important;
          }
          #projects .project-wrapper:hover .case-title {
              transform: none;
          }
      }

      /* RWD: 767px 以下 - 與 container 24px 一致，year 對齊 section heading */
      @media screen and (max-width: 767px) {
          #projects .project-wrapper {
              padding: 2rem 24px !important;
              align-items: flex-start !important;
          }
      }

      /* RWD: 小螢幕 - 同上，縮小垂直間距 */
      @media screen and (max-width: 480px) {
          #projects .project-wrapper {
              padding: 1.5rem 24px !important;
              align-items: flex-start !important;
          }
          #projects .project-content-container {
              grid-template-columns: 24px minmax(80px, 1fr) auto !important;
              gap: 0.25rem 1rem !important;
          }
          #projects .case-arrow {
              width: 20px !important;
          }
          #projects .case-title {
              font-size: 1.125rem !important;
              line-height: 1.35 !important;
          }
          #projects .project-title-container .label,
          #projects .case-year {
              font-size: 0.85rem !important;
          }
      }


/* Hero Banner Full Width Overrides */
@media screen and (min-width: 992px) {
  .hero-logo-container {
    border-radius: 0 !important;
    width: calc(100% + 6rem) !important;
    margin-left: -3rem !important;
    margin-right: -3rem !important;
    max-width: none !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .hero-logo-container {
    border-radius: 0 !important;
    width: calc(100% + 4rem) !important;
    margin-left: -2rem !important;
    margin-right: -2rem !important;
    max-width: none !important;
  }
}