/* 這裡放你的基礎 CSS 樣式，例如重置 (Reset) */
 :root {
   --rr-gold: #bfa575;
   --rr-ink : #2a2623;
   --bg     : #f9f9f9;
   /* 頁面底色範例 */
 }

html {
  scroll-padding-top: 120px;
}

 body {
   margin          : 0;
   font-family     : sans-serif;
   background-color: var(--bg);
   color           : var(--rr-ink);
  min-height: 150vh;
   /* 為了演示滾動效果 */
 }

 .container {
   max-width: 1200px;
   margin   : 0 auto;
   padding  : 0px;
 }

 /* --- 滾動回應式 Header 樣式 --- */
 .site-header {
   position: fixed;
   /* 或是 sticky，視你版面需求而定 */
   top     : 0;
   width   : 100%;
   z-index : 1000;

   /* 初始狀態：完全純白不透明 */
   background-color: #ffffff;
   border-bottom   : 1px solid transparent;
   padding         : 20px 0;

   /* 平滑過渡所有屬性 */
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 /* 捲動後的狀態 (JS 控制觸發) */
 .site-header.is-elevated {
   /* **核心**：純白半透明 (90% 白色) */
   background-color: rgba(255, 255, 255, 0.5) !important;

   /* **核心**：磨砂玻璃效果 (防雜色干擾) */
   backdrop-filter        : blur(15px);
   -webkit-backdrop-filter: blur(15px);

   /* 視覺細節：加入金邊與柔和陰影 */
   border-bottom: 1px solid var(--rr-gold);
   box-shadow   : 0 5px 25px rgba(0, 0, 0, 0.07);

   /* 滾動時縮小高度 */
   padding: 10px 0;
 }

 /* 內容排版輔助 */
 .header-inner {
   display        : flex;
   justify-content: space-between;
   align-items    : center;
 }

 .brand {
   display        : flex;
   align-items    : center;
   gap            : 12px;
   text-decoration: none;
   color          : inherit;
 }

 .brand-logo {
   height: 110px;
   width : auto;
 }

 .brand-text {
   display       : flex;
   flex-direction: column;
 }

 .brand-title {
   font-weight: bold;
   font-size  : 1.2rem;
  font-family: var(--heading-font);
 }

 .brand-sub {
   font-size: 0.8rem;
   opacity  : 0.7;
 }

 .nav {
   display    : flex;
   align-items: center;
   gap        : 20px;
 }

 .nav-link {
  position: relative;
  display: inline-block;

  font-family: var(--heading-font);
  letter-spacing: 0.08em;

  color: var(--rr-ink-light);
  padding: 10px 12px;

  transition: all 0.35s ease;
 }
.nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;

  width: 0%;
  height: 2px;

  background: linear-gradient(
    to right,
    transparent,
    var(--rr-gold),
    transparent
  );

  transform: translateX(-50%);
  transition: width 0.35s ease;
}

.nav-link.is-active {
  color: var(--rr-gold);
}

.nav-link.is-active::after {
  width: 70%;
}


.nav-link::before {
  content: "";
  position: absolute;
  inset: 0;

  background: radial-gradient(
    circle at center,
    rgba(191,165,117,0.15),
    transparent 70%
  );

  opacity: 0;
  transition: opacity 0.4s ease;
}



 .btn-ghost {
background: transparent;
    border: 1px solid #ffd24a;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
 }

 .content-placeholder {
   padding-top: 150px;
   /* 預留空間給 Header */
   text-align : center;
 }



 @media (max-width: 425px) {
   .brand-logo {
     height: 80px;
   }

   .brand-text {
     font-size: 1.5rem;
   }

   .brand-title {
     margin-top: 1rem;
   }

   .brand-sub {
     letter-spacing: 0.1px;
   }

.nav-link::after {

  background: linear-gradient(
    to left,
     var(--rr-gold),transparent,
  );

  transform: translateX(-50%);
}



 }



 @media (max-width: 320px) {

    .brand-logo {
        height: 65px;
    }

   .brand-sub {
     font-size  : 0.7rem !important;
     opacity    : 0.7 !important;
     line-height: 1.3 !important;
   }
    .brand-title {
        margin-top: 0.5rem;
        font-size: 1.28rem;
    }

.nav-toggle {
    padding: 6px 6px;
}
 }