/* =========================
   Journal / Lookbook / Footer
========================= */
.lookbook{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem }
.lb-card{ border:1px solid var(--line); background:var(--bg-2); border-radius:var(--radius); overflow:hidden }
.lb-media{ position:relative; aspect-ratio:16/9 } .lb-media video{ position:absolute; inset:0; width:180%; height:100%; object-fit:cover }
.lb-body{ padding:1rem }
.journal{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem }
.post{ border:1px solid var(--line); background:var(--bg-2); border-radius:var(--radius); overflow:hidden }
.post .cover{ aspect-ratio:16/9; background:url('https://www.etonwedding.com/img/photo/mammy/style-beauty/pregnant%20(4).jpg') center/cover }
.post1 .cover{ background:url('https://www.etonwedding.com/img/photo/mammy/style-beauty/pregnant%20(22).jpg') center/cover }
.post2 .cover{ background:url('https://www.etonwedding.com/img/photo/mammy/style-cute/pregnant%20(37).jpg') center/cover }
.post .bd{ padding:1rem }
@media (max-width:980px){ .testi{ grid-template-columns:1fr } .lookbook{ grid-template-columns:1fr } .journal{ grid-template-columns:1fr } }

footer{ background: color-mix(in oklab, var(--bg) 100%, white 10%); }
footer .footer-grid{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding-block:14px; min-height:80px; justify-content:space-around;
}
footer .footer-brand{ display:inline-flex; align-items:center; line-height:1 }
footer .footer-brand img{ height:70px; width:auto; display:block }
@media (max-width:640px){ footer .footer-brand img{ height:40px } }
footer .footer-text{ display:flex; flex-direction:column; justify-content:center; text-align:center; color:#B17844 }
footer .footer-text p{ margin:.25rem 0; line-height:1.8 }

/* Size Finder Modal */
    .modal{position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:.3s;}
    .modal.show{opacity:1; pointer-events:auto}
    .modal-card{width:min(720px,92%); background:var(--bg-2); border-radius:var(--radius-lg); border:1px solid var(--line); box-shadow:var(--shadow); overflow:hidden}
    .modal-card .hd{display:flex; justify-content:space-between; align-items:center; padding:1rem 1.2rem; border-bottom:1px solid var(--line)}
    .modal-card .bd{padding:1rem 1.2rem; display:grid; grid-template-columns:1fr 1fr; gap:1rem}
    .modal-card label{font-size:.9rem; color:var(--muted)}
    .modal-card input, .modal-card select{width:100%; padding:.7rem .8rem; border-radius:10px; border:1px solid var(--line)}
    .modal-card .ft{display:flex; justify-content:flex-end; gap:.6rem; padding:1rem 1.2rem; border-top:1px solid var(--line)}
    .size-result{background:#F4F7F5; border:1px dashed #C9D8CE; padding:.8rem 1rem; border-radius:12px}
    @media (max-width: 760px){.modal-card .bd{grid-template-columns:1fr}
    .modal-card{margin-top: 80px;}
  }
  :root{
  /* 確保有值；你也可以換成你的主底色 */
  --bg: #FAF7F4; /* 珍珠米白 */
}

/* Footer 背景保底 + 相容處理 */
footer{
  /* 1) 保底：即使 color-mix 不支援也有顏色 */
  background-color: #FAF7F4;

  /* 2) 支援 color-mix 的瀏覽器會套這個（in srgb 相容性更好） */
  background-color: color-mix(in srgb, var(--bg, #FAF7F4) 92%, white 8%);

  /* 3) 避免與父層背景發生混色/濾鏡干擾 */
  isolation: isolate;
}