/* 1. 標準色與基礎設定 (藝廊風格) */
       :root {
           --primary-dark: #1A1A1A;
           /* 礦物深黑 */
           --bg-light: #F5F5F5;
           /* 淺灰白 */
           --text-main: #333333;
           /* 主要文字 */
           --text-muted: #8E8E8E;
           /* 次要文字 */
           --accent: #205072;

           --transition: all 0.3s ease;
           /* 強制設定為 Noto Serif TC */
           --font-serif: 'Noto Serif TC', serif;
       }

       * {
           font-family: var(--font-serif);

       }

       /* 1. 解決貼邊：幫主要內容區加上最大寬度並居中 */
       #collections,
       nav .nav-content {
           max-width: 1000px;
           /* 或者你喜歡的寬度，如 1400px */
           margin-left: auto;
           margin-right: auto;
           padding-left: 20px;
           /* 留一點安全邊距，避免小螢幕貼邊 */
           padding-right: 20px;
       }

       body,
       h1,
       h2,
       p {
           margin: 0;
           padding: 0;
       }

       body {
           background-color: #FFFFFF;
           color: var(--primary-dark);
           min-height: 100vh;
           line-height: 1.6;
           margin: 0;
       }

       /* 2. 導覽列 (Navigation) */
       nav {
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: 0 5%;
           background: white;
           border-bottom: 1px solid #eee;
           position: sticky;
           top: 0;
           z-index: 1000;
       }

       .logo img {
           color: var(--primary-dark);
           width: 200px;

       }

       nav ul {
           display: flex;
           list-style: none;
       }

       nav ul li {
           margin-left: 30px;
       }

       nav ul li a {
           text-decoration: none;
           color: var(--text-main);
           font-size: 0.9rem;
           transition: var(--transition);
       }

       nav ul li a:hover {
           color: var(--accent);
       }

       .nav-icons {
           display: flex;
           align-items: center;
           gap: 20px;
           color: var(--primary-dark);
       }

       .nav-icons i,
       a {
           color: var(--primary-dark);
           text-decoration: none;
       }

       /* 3. 英雄看板區 (Hero Section) */
       .hero {
           height: 90vh;
           background:
               linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2)),
               url('images/bird/LINE_ALBUM_網頁圖片_260504_1.jpg');
           background-size: cover;
           background-position: center;
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
           color: white;
           text-align: center;
       }

       .hero h1 {
           font-size: 3.5rem;
           letter-spacing: 8px;
           margin-bottom: 10px;
           text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
       }



       .hero p {
           font-size: 1.2rem;
           letter-spacing: 3px;
           margin-bottom: 30px;
       }

       .cta-btn {
           padding: 12px 35px;
           background: transparent;
           border: 1px solid white;
           color: white;
           text-decoration: none;
           transition: var(--transition);
           letter-spacing: 2px;
       }

       .cta-btn:hover {
           background: white;
           color: var(--primary-dark);
       }

       /* 4. 精選分類區 (Collections) */
       .section-title {
           text-align: center;
           padding: 60px 0 40px;
       }

       .section-title h2 {
           font-size: 2rem;
           letter-spacing: 4px;
           position: relative;
           padding-bottom: 10px;
       }

       .section-title h2::after {
           content: '';
           width: 40px;
           height: 2px;
           background: var(--accent);
           position: absolute;
           bottom: 0;
           left: 50%;
           transform: translateX(-50%);
       }

       /* 
        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            padding: 0 5% 60px;
        }

        .category-item {
            position: relative;
            height: 400px;
            overflow: hidden;
            background-color: var(--primary-dark);
        }

        .category-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.8;
            transition: var(--transition);
        } */
       /* 讓精選專題的容器具備 Grid 靈活性 */
       .grid-container {
           display: grid;
           /* 設定三欄，但會根據螢幕寬度自動調整 */
           grid-template-columns: repeat(3, 1fr);
           gap: 20px;
           padding: 20px 0;
       }

       /* 設定精選專題容器 */
       .grid-container {
           width: 100%;
           display: grid;
           /* 基礎設定為三欄佈局 */
           grid-template-columns: repeat(2, 1fr);
           gap: 20px;
           margin-top: 30px;
       }

       /* 核心：將第一個分類項目設定為「置頂大圖」 */
       .category-item:first-child {
           grid-column: 1 / 3;
           /* 大圖橫跨兩欄 */
           height: 450px;
           /* 增加高度讓它更有氣勢 */
       }

       /* 其他一般分類（如風景、人文）的設定 */
       .category-item {
           height: 280px;
           /* 設定固定高度，確保對齊 */
           position: relative;
           overflow: hidden;
           border-radius: 8px;
           /* 增加一點微圓角提升質感 */
       }

       /* 確保所有攝影照片完美填滿容器且不變形 */
       .category-item img {
           width: 100%;
           height: 100%;
           object-fit: cover;
           /* 這是攝影網站最關鍵的屬性，確保照片不縮放變形 */
           transition: transform 0.4s ease;
       }

       /* 套用到 Hero 的標題或卡片標題上 */
       .hero-content h1,
       .category-label h3 {
           color: #ffffff;
           /* 白字 */
           text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5),
               /* 柔和的大陰影 */
               0 1px 2px rgba(0, 0, 0, 0.8);
           /* 銳利的深色邊緣 */
       }

       /* 滑鼠滑過時的動態效果 */
       .category-item:hover img {
           transform: scale(1.05);
           /* 微縮放增加互動感 */
       }

       .category-label {
           position: absolute;
           bottom: 20px;
           left: 20px;
           color: white;
           z-index: 10;
       }

       /* 5. 頁尾 (Footer) */
       /* 修正 Footer 過重與貼邊問題 */
       footer {
           background-color: #1a1a1a;
           /* 深灰比純黑高級 */
           color: #f4f4f4;
           padding: 60px 0;
           /* 增加上下空間 */
           text-align: center;
           margin-top: 80px;
           /* 與上方專題保持距離 */
       }

       .footer-content {
           max-width: 1200px;
           /* 限制寬度，不貼邊 */
           margin: 0 auto;
       }

       /* 讓 Footer 內部更有層次 */
       .footer-divider {
           border: 0;
           border-top: 1px solid rgba(255, 255, 255, 0.1);
           margin: 30px 0;
       }

       /* 縮小你的連結，讓它看起來像浮水印 */
       .studio-link {
           display: block;
           font-size: 0.75rem;
           /* 縮小字體 */
           color: rgba(255, 255, 255, 0.4);
           /* 降低透明度 */
           text-decoration: none;
           margin-bottom: 5px;
           transition: 0.3s;
       }

       .studio-link:hover {
           color: rgba(255, 255, 255, 0.8);
       }

       .copyright {
           font-size: 0.75rem;
           opacity: 0.4;
       }