@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Noto+Serif+TC:wght@400;500;600;700&display=swap');

:root { --ink:#253125; --wine:#652133; --cream:#f7f2e9; --gold:#c6a56c; --line:rgba(74,65,48,.2); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:78px; }
body { margin:0; overflow-x:hidden; color:var(--ink); background:var(--cream); font-family:'Noto Serif TC',serif; }
img { display:block; width:100%; }
.site-header { position:fixed; inset:0 0 auto; z-index:10; height:72px; padding:0 clamp(20px,5vw,72px); display:flex; justify-content:space-between; align-items:center; color:#fff; background:linear-gradient(180deg,rgba(10,16,10,.55),transparent); transition:background .25s,box-shadow .25s; }
.site-header.scrolled { background:rgba(31,42,32,.93); box-shadow:0 2px 18px rgba(0,0,0,.15); }
.brand { color:inherit; text-decoration:none; font-family:'Cormorant Garamond',serif; font-size:28px; letter-spacing:.13em; }
nav { display:flex; gap:clamp(14px,3vw,40px); }
nav a { color:inherit; text-decoration:none; font-size:14px; letter-spacing:.08em; white-space:nowrap; opacity:.92; }
nav a:hover, nav a:focus-visible { color:#f3d89d; }
.hero { min-height:100svh; position:relative; display:grid; place-items:center; text-align:center; color:#fff; background:linear-gradient(90deg,rgba(12,18,11,.48),rgba(25,14,13,.2)),url('DSC06861.jpg') center 54%/cover no-repeat; }
.hero::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(14,21,14,.5),transparent 42%); }
.hero-content { z-index:1; margin-top:40px; padding:24px; text-shadow:0 2px 14px rgba(0,0,0,.42); }
.eyebrow { margin:0 0 12px; color:var(--gold); font-family:'Cormorant Garamond',serif; font-size:15px; font-weight:600; letter-spacing:.22em; }
.hero .eyebrow { color:#f3d89d; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:18px; font-size:clamp(58px,8vw,112px); font-weight:500; letter-spacing:.1em; line-height:1; }
h1 span { color:#e9c785; font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:400; }
.hero-subtitle { margin-bottom:14px; font-size:clamp(17px,2vw,23px); letter-spacing:.17em; }
.countdown { min-height:28px; margin:0; font-family:'Cormorant Garamond',serif; font-size:21px; letter-spacing:.12em; }
.scroll-cue { z-index:1; position:absolute; bottom:28px; color:#fff; font-size:13px; letter-spacing:.12em; text-decoration:none; }.scroll-cue span { margin-left:7px; font-size:19px; }
.section { padding:clamp(76px,10vw,136px) clamp(22px,7vw,110px); }
.section-heading { margin-bottom:52px; }.section-heading.centered { text-align:center; }.section-heading h2 { margin:0; font-size:clamp(36px,4.3vw,58px); font-weight:500; letter-spacing:.12em; }.section-intro { margin:14px 0 0; color:#725b42; font-size:16px; letter-spacing:.08em; }
.story { background:#e8e2d7; }.story-layout { width:min(1100px,100%); margin:auto; display:grid; grid-template-columns:minmax(280px,.88fr) 1fr; align-items:center; gap:clamp(38px,8vw,120px); }.story-photo { margin:0; aspect-ratio:3/4; overflow:hidden; }.story-photo img { height:100%; object-fit:cover; }.story-copy { font-size:clamp(21px,2.5vw,32px); line-height:2; letter-spacing:.07em; }.story-copy .script-note { margin:25px 0 0; color:var(--wine); font-size:16px; line-height:2; }
.members { background:#f8f5ef; }.member-grid { width:min(1050px,100%); margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:30px; }.member-card { overflow:hidden; background:#fff; box-shadow:0 13px 35px rgba(56,46,28,.09); }.member-image { aspect-ratio:4/5; overflow:hidden; }.member-image img { height:100%; object-fit:cover; object-position:center 25%; transition:transform .5s; }.member-card:hover img { transform:scale(1.035); }.member-info { padding:28px 30px 34px; }.member-role { margin-bottom:8px; color:var(--gold); font-family:'Cormorant Garamond',serif; font-size:14px; font-weight:600; letter-spacing:.2em; }.member-info h3 { margin-bottom:18px; font-size:27px; font-weight:500; letter-spacing:.08em; }.member-info h3 span { font-size:15px; font-weight:400; }.member-info ul { margin:0; padding:0; list-style:none; color:#655d50; line-height:2; font-size:15px; }.member-info li::before { content:'—'; margin-right:9px; color:var(--gold); }
.tour { color:#f7f3e9; background:linear-gradient(rgba(25,42,29,.92),rgba(25,42,29,.92)),url('DSC06810.jpg') center/cover fixed; }.tour .section-heading h2 { color:#fff; }.tour .section-intro { color:#e8d6b0; }.tour-list { width:min(850px,100%); margin:0 auto; padding:0; list-style:none; border-top:1px solid rgba(255,255,255,.35); }.tour-list li { display:grid; grid-template-columns:76px 1fr; gap:24px; padding:27px 6px; border-bottom:1px solid rgba(255,255,255,.35); }.tour-number { margin:0; color:#d6b471; font-family:'Cormorant Garamond',serif; font-size:28px; line-height:.8; }.tour-list h3 { margin-bottom:12px; font-size:clamp(21px,3vw,26px); font-weight:500; letter-spacing:.08em; }.tour-list div p { margin-bottom:5px; color:#e7e3dc; font-size:15px; letter-spacing:.04em; }.tour-list .venue { color:#f6e2b7; font-size:18px; }.address a { display:inline-block; margin-left:8px; padding:3px 9px; border:1px solid rgba(246,226,183,.72); border-radius:999px; color:#f6e2b7; font-size:12px; letter-spacing:.06em; text-decoration:none; transition:background .2s,color .2s; }.address a:hover,.address a:focus-visible { color:#273629; background:#f6e2b7; }
.gallery { background:#211f1b; color:#f8f4ec; }.gallery .section-heading h2 { color:#fff; }.carousel { width:min(1060px,100%); margin:auto; }.carousel-track { position:relative; overflow:hidden; aspect-ratio:16/10; background:#121512; }.slide { position:absolute; inset:0; margin:0; opacity:0; transform:scale(1.02); transition:opacity .6s ease,transform .8s ease; }.slide.is-active { opacity:1; transform:scale(1); }.slide img { height:100%; object-fit:cover; object-position:center; }.carousel-controls { display:flex; align-items:center; justify-content:center; gap:20px; padding-top:25px; }.carousel-button { width:38px; height:38px; border:1px solid rgba(255,255,255,.55); border-radius:50%; color:#fff; background:transparent; cursor:pointer; font-size:20px; }.carousel-button:hover { color:#211f1b; background:#f7f2e9; }.dots { display:flex; gap:9px; }.dot { width:7px; height:7px; padding:0; border:0; border-radius:50%; background:#77736b; cursor:pointer; }.dot.is-active { background:#e1bb76; }
footer { padding:26px; color:#d9d3c9; background:#171612; text-align:center; font-family:'Cormorant Garamond',serif; letter-spacing:.12em; }
@media (max-width:680px) { .site-header { height:62px; padding:0 16px; }.brand { font-size:23px; } nav { gap:12px; } nav a { font-size:12px; }.hero { background-position:54% center; }.section { padding:72px 22px; }.section-heading { margin-bottom:37px; }.story-layout,.member-grid { grid-template-columns:1fr; }.story-layout { gap:30px; }.story-photo { max-height:570px; }.story-copy { font-size:22px; }.member-grid { gap:22px; }.member-image { aspect-ratio:1/1; }.tour { background-attachment:scroll; }.tour-list li { grid-template-columns:48px 1fr; gap:12px; }.carousel-track { aspect-ratio:4/5; }.slide img { object-position:center; } }
@media (max-width:480px) { html { scroll-padding-top:62px; }.site-header { padding:0 12px; }.brand { flex:0 0 auto; font-size:20px; letter-spacing:.07em; } nav { flex:1; justify-content:flex-end; gap:0; } nav a { padding:9px 5px; font-size:11px; letter-spacing:0; }.hero-content { width:100%; padding:18px; }.hero .eyebrow { font-size:12px; }.hero h1 { font-size:clamp(43px,13vw,58px); letter-spacing:.04em; }.hero-subtitle { font-size:16px; }.countdown { font-size:18px; }.scroll-cue { bottom:18px; }.section { padding:60px 18px; }.section-heading h2 { font-size:33px; }.story-copy { font-size:20px; line-height:1.85; }.member-info { padding:23px 22px 28px; }.tour-list li { padding:23px 0; }.tour-number { font-size:24px; }.tour-list h3 { font-size:20px; line-height:1.5; }.tour-list div p { font-size:13px; line-height:1.7; }.tour-list .venue { font-size:16px; }.address a { display:table; margin:8px 0 0; }.carousel-controls { gap:14px; }.carousel-button { width:36px; height:36px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.slide,.member-image img { transition:none; } }
/* ============================================================
   照片輪播與 Hero 最終修復（貼在 style.css 最底部）
   ============================================================ */

/* 1. 桌面版輪播圖片修正 */
.carousel-track {
  position: relative !important;
  background-color: #121512 !important;
}

.slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* 確保圖片不被切邊，完整呈現 */
  object-position: center !important;
  background-color: #121512 !important;
}

/* 2. 手機版響應式修正 (< 680px) */
@media (max-width: 680px) {
  /* Hero 首頁背景圖對焦 */
  .hero {
    background-position: center center !important;
  }

  /* 輪播容器改用 3/4 比例（適合手機顯示直幅婚紗照） */
  .carousel-track {
    aspect-ratio: 3/4 !important;
    max-height: 75vh !important;
  }

  .slide img {
    object-fit: contain !important;
  }
}

/* 3. 極小螢幕修正 (< 480px) */
@media (max-width: 480px) {
  .carousel-track {
    aspect-ratio: 3/4 !important;
  }
}
/* 首頁封面圖手機版居中強效修正 */
@media (max-width: 680px) {
  .hero {
    /* 1. 將背景圖對焦位置設為 50% 50% (正中央) */
    background-position: 55% 45% !important;
    
    /* 2. 避免手機上背景圖縮放比例過大導致左右新人被切掉 */
    background-size: cover !important;
  }
}