/* ============================================================
   preview-cream · 奶油金版覆蓋層（預覽專用，未上線）
   ------------------------------------------------------------
   載入順序：styles → pages → brand-v2 → preview-light → 本檔
   本檔只做「奶油金版」相對「白亮版」的差異：
     1. 底色改奶油 #F5EEDF
     2. 首屏 hero 改成「金色相框 + 照片」版式（客戶 mockup 確認）
     3. 白色大標題、3D 輪播、滾動提示收起（客戶：唔要白色 Soarloo Skin Center）
   只動視覺，不改字號/間距之外的東西；版面位移僅限 hero 區。
   ============================================================ */

:root{
  --base:   #F5EEDF;    /* 奶油 */
  --base-2: #EFE5D0;
  --base-3: #E7DAC1;
  --gold-1: #7F5C13;    /* 比白亮版再深一階：奶油底上小金字對比 ≥4.9:1 */
}

/* ---------- 底色：奶油 + 淡金暈 ---------- */
body{
  background:
    radial-gradient(88% 52% at 78% 4%,  rgba(210,169,79,.18), transparent 62%),
    radial-gradient(72% 48% at 4% 96%,  rgba(142,47,38,.07),  transparent 64%),
    var(--base);
}

/* ---------- 首屏：改成相框版式 ---------- */
.hero{
  height:auto;
  min-height:0;
  padding:calc(64 * var(--u)) 0 clamp(44px,6vw,84px);
  text-align:center;
  overflow:visible;
}
/* 置中只為新版式（字標/相框/名牌/標語）服務；導航與輪播卡繼承回左對齊，不污染內部排版 */
.hero .nav, .hero .hcar{ text-align:left; }
@media (max-width:1000px){
  .hero{ padding:calc(76px + env(safe-area-inset-top)) 20px clamp(36px,8vw,56px); }
}

/* 照片：從滿版背景 → 收進金色相框 */
.hero__bg{
  position:relative; inset:auto; z-index:1;
  display:block;
  width:min(880px, 86vw);
  height:auto;
  aspect-ratio:3/2;                    /* 照片是 4:3，框放高讓圓環+證書完整露出 */
  margin:0 auto;
  object-fit:cover;
  object-position:center 45%;          /* wall-v3（1920×1341）上下僅裁 4.5%，保證證書完整 */
  padding:clamp(10px,1.5vw,18px);      /* 框體厚度 */
  background:linear-gradient(150deg, #D2A94F, #B8892B 42%, #9A7020 100%);
  border-radius:4px;
  box-shadow:
    0 26px 60px -22px rgba(62,46,32,.42),
    0 4px 14px -6px rgba(62,46,32,.22);
  animation:none;
  filter:none;                          /* wall-v2 已調好色，不再加濾鏡 */
}
/* 相框外細金線（用 outline 不收 layout） */
.hero__bg{
  outline:1px solid rgba(184,137,43,.35);
  outline-offset:7px;
}

/* 客戶：唔要白色 Soarloo Skin Center 大標 → 收起 */
.hero__title{ display:none; }
/* 3D 輪播卡、滾動提示、黑色遮罩在新版式裡沒有位置 → 收起（DOM 保留，JS 不報錯） */
.hcar, .scroll, .hero__scrim{ display:none; }

/* 小字標（取代白色大標）：字標在相框上方，左右金線 */
.hero__wordmark{
  display:inline-flex; align-items:center; gap:14px;
  font-family:"Playfair Display",serif;
  font-size:clamp(14px,1.5vw,19px);
  letter-spacing:.34em; text-indent:.34em;
  color:#8E2F26;
  margin:0 0 clamp(18px,2.4vw,30px);
}
.hero__wordmark::before,
.hero__wordmark::after{
  content:""; width:clamp(28px,5vw,62px); height:1px; background:#B8892B;
}

/* 相框下的燙金名牌 */
.hero__plate{
  display:inline-block;
  margin:clamp(20px,2.6vw,32px) 0 0;
  padding:9px 26px;
  border:1px solid #B8892B;
  background:linear-gradient(180deg,#fff, #EFE5D0);
  font-family:"Playfair Display",serif;
  font-size:clamp(13px,1.35vw,16.5px);
  letter-spacing:.26em; text-indent:.26em;
  color:#8E2F26;
  box-shadow:0 2px 0 rgba(184,137,43,.25);
}

/* 標語：從「絕對定位壓在圖左下」→ 相框下方居中 */
.intro{
  position:static;
  left:auto; top:auto;
  width:auto;                          /* 原版窄欄 width:calc(248*var(--u)) 會把中文標語擠換行 */
  max-width:820px;
  margin:clamp(30px,4vw,52px) auto 0;
  text-align:center;
  padding:0 20px;
}
.intro__head{ color:var(--ink); }
.intro__head .line__in{ text-shadow:0 0 calc(40 * var(--u)) rgba(210,169,79,.20); }
.intro__body{ color:var(--ink-dim); position:static; max-width:none; }
.intro__body p{ color:var(--ink-dim); max-width:none; }
/* 原本是絕對定位壓在標語右下（配滿版 hero）；新版式改回文流，避免重疊 */
.intro__year{
  position:static; display:inline-block; margin:16px 0 0;
  left:auto; right:auto; bottom:auto;
  color:var(--gold-1); border-color:var(--gold-2);
}

/* 導航：hero 變矮後，absolute 靠右上會壓到相框 → 固定在頂部 */
.hero .nav{
  position:absolute;
  top:calc(20 * var(--u));
  right:calc(24 * var(--u));
}
@media (max-width:1000px){
  .hero .nav{ position:absolute; top:calc(14px + env(safe-area-inset-top)); right:14px; }
}

/* ---------- 子頁頁首：也跟奶油底協調 ---------- */
.phead{ border-bottom:1px solid var(--hair); }

/* ---------- 跑馬燈：奶油底 ---------- */
.mara--edge::before{ background:linear-gradient(to right, var(--base), rgba(245,238,223,0)); }
.mara--edge::after { background:linear-gradient(to left,  var(--base), rgba(245,238,223,0)); }

/* ---------- 頁尾分隔 ---------- */
.foot--site{ border-top:1px solid var(--hair); }

/* ---------- 字級漂浮按鈕：JS 內聯深底白字，奶油版改奶油底深字 ---------- */
.fsz-btn{
  color:#3E2E20 !important;
  background:rgba(250,247,241,.94) !important;
  border:1px solid rgba(184,137,43,.5) !important;
  box-shadow:0 6px 20px rgba(62,46,32,.22) !important;
}

/* ---------- 影片封面：播放層壓在暗影片上，改奶油罩 + 深字 ---------- */
.vfilm__v{ background:var(--base-2); }
.vfilm__play{ background:rgba(250,247,241,.52); color:#3E2E20; }
.vfilm__txt{ color:#3E2E20; }
.vfilm__disc{
  border-color:rgba(122,90,22,.55);
  background:rgba(250,247,241,.55);
}
.vfilm__disc svg{ fill:#7A5A16; }

/* ============================================================
   2026-10-26 · 視覺修復（地球 / 3D 皮膚模型）+ 裝飾點綴
   只動配色與裝飾，不改結構與主色調
   ============================================================ */

/* --- 地球：點陣配色交給 app-cream.js 讀取（深色版無此變數，不受影響） --- */
:root{
  --globe-gold: 127, 92, 19;    /* 深金：弧線與香港標記 */
  --globe-ink:  62, 46, 32;     /* 深咖啡：陸地點陣 */
}

/* 地球舞台：細金環 + 四方位刻度（純裝飾，pointer-events 關閉，可拖曳不受影響） */
.globe__stage::before{
  content:""; position:absolute; inset:4.5%;
  border:1px solid rgba(127,92,19,.32);
  border-radius:50%;
  pointer-events:none;
}
.globe__stage::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background:
    linear-gradient(#7F5C13,#7F5C13) no-repeat top 2.2% left 50% / 1px 10px,
    linear-gradient(#7F5C13,#7F5C13) no-repeat bottom 2.2% left 50% / 1px 10px,
    linear-gradient(#7F5C13,#7F5C13) no-repeat top 50% left 2.2% / 10px 1px,
    linear-gradient(#7F5C13,#7F5C13) no-repeat top 50% right 2.2% / 10px 1px;
}

/* --- 3D 皮膚模型（insights）：黑底影片收進金色相框，與首頁相框呼應 --- */
.skin3d{
  position:relative;
  padding:clamp(10px,1.4vw,16px);
  background:linear-gradient(150deg,#D2A94F,#B8892B 42%,#9A7020);
  border-radius:4px;
  box-shadow:
    0 22px 46px -20px rgba(62,46,32,.42),
    0 4px 12px -6px rgba(62,46,32,.22);
}
.skin3d::after{
  content:""; position:absolute; inset:-6px;
  border:1px solid rgba(184,137,43,.35);
  border-radius:6px; pointer-events:none;
}
.skin3d__v{ border-radius:2px; }
.skin3d__cap{
  margin-top:12px;
  color:#FDF6E8;
  text-shadow:0 1px 2px rgba(62,46,32,.35);
}

/* --- 裝飾點綴：每個章節 kicker 前加一枚細金小圓環（呼應 logo 圓環） --- */
.sect__no::before{
  content:""; display:inline-block;
  width:.72em; height:.72em;
  border:1px solid var(--gold-1);
  border-radius:50%;
  margin-right:.62em;
  vertical-align:-.06em;
}

/* 頁尾上方加一道細金雙線收尾 */
.foot--site{
  border-top:none;
  box-shadow:inset 0 1px 0 var(--hair), inset 0 4px 0 var(--base), inset 0 5px 0 rgba(184,137,43,.28);
}

/* ============================================================
   2026-10-26 · 表單字級收小（placeholder 被裁切 / 按鈕換行）
   ============================================================ */
.lead__input{ font-size:calc(15 * var(--u) * var(--fs-text)); }
.lead__input::placeholder{ font-size:.88em; letter-spacing:.02em; }
.lead__submit{ white-space:nowrap; }

@media (max-width:860px){
  .lead__label{ font-size:calc(11.5px * var(--fs-text)); letter-spacing:.13em; }
  .lead__input{ font-size:calc(14.5px * var(--fs-text)); padding:11px 12px; }
  .lead__input::placeholder{ font-size:.88em; }
  .lead__submit{ font-size:calc(15px * var(--fs-text)); letter-spacing:.05em; padding:13px 22px; }
  .lead__consent{ font-size:calc(13px * var(--fs-text)); }
}