*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:#172636;
  background:#f8f3ec;
  font-family:"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;
}
a{text-decoration:none;color:inherit}
button{font:inherit}

.site-header{
  min-height:98px;
  padding:18px clamp(24px,5vw,72px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #ded7cd;
  background:#fffdf9;
}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{
  width:44px;height:44px;border-radius:13px;
  display:grid;place-items:center;
  background:#09233a;color:#fff;font:700 13px Georgia,serif;
}
.brand strong{display:block;font-size:18px;letter-spacing:.12em}
.brand small{display:block;margin-top:3px;font-size:8px;letter-spacing:.22em}
.back-button{
  padding:12px 20px;border:1px solid #d7d0c7;border-radius:999px;
  background:#fff;font-size:13px;
}

.hero,.detail-hero{
  text-align:center;
  padding:86px 24px 54px;
}
.eyebrow{
  display:block;color:#a85141;
  font-size:11px;font-weight:700;letter-spacing:.25em;
}
.hero h1{
  margin:20px 0 14px;
  font-size:clamp(42px,6vw,76px);
  line-height:1.08;font-weight:500;
}
.detail-hero h1{
  margin:18px 0 12px;
  font-size:clamp(38px,5vw,64px);
  line-height:1.15;font-weight:500;
}
.hero p,.detail-hero p{
  max-width:760px;margin:auto;
  color:#706b65;font-size:15px;line-height:1.9;
}

.series-grid{
  width:min(1180px,calc(100% - 48px));
  margin:0 auto 90px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:30px;
}
.series-card{
  overflow:hidden;border:1px solid #ded7ce;border-radius:28px;
  background:#fff;transition:.25s ease;
  box-shadow:0 16px 42px rgba(56,42,28,.06);
}
.series-card:hover{transform:translateY(-6px);box-shadow:0 22px 52px rgba(56,42,28,.12)}
.series-collage{
  position:relative;height:430px;padding:22px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  background:#eee5db;overflow:hidden;
}
.series-collage img{
  width:100%;height:100%;object-fit:cover;border-radius:12px;
}
.series-number{
  position:absolute;right:24px;top:24px;
  width:44px;height:44px;display:grid;place-items:center;
  border-radius:50%;background:#fff;color:#172636;font-size:13px;
}
.series-content{padding:30px 32px 34px}
.series-content span{
  color:#a85141;font-size:11px;font-weight:700;letter-spacing:.16em;
}
.series-content h2{margin:12px 0;font-size:30px;line-height:1.3}
.series-content p{min-height:58px;margin:0;color:#726c65;line-height:1.8}
.series-content strong{display:block;margin-top:22px;font-size:14px}

.gallery-grid{
  width:min(1180px,calc(100% - 48px));
  margin:0 auto 90px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  align-items:start;
}
.work-card{
  width:100%;padding:0;overflow:hidden;
  border:1px solid #ded7ce;border-radius:20px;
  background:#fff;text-align:left;cursor:pointer;
  box-shadow:0 12px 34px rgba(56,42,28,.05);
  transition:.25s ease;
}
.work-card:hover{transform:translateY(-5px);box-shadow:0 18px 42px rgba(56,42,28,.12)}
.work-card img{
  display:block;width:100%;height:auto;
  object-fit:contain;background:#111;
}
.work-card span{display:block;padding:16px 18px 20px}
.work-card small{
  color:#a85141;font-size:10px;font-weight:700;letter-spacing:.14em;
}
.work-card strong{
  display:block;margin-top:6px;font-size:16px;line-height:1.5;
}

.lightbox{
  position:fixed;inset:0;z-index:999;
  display:none;align-items:center;justify-content:center;
  padding:40px;background:rgba(0,0,0,.84);
}
.lightbox.open{display:flex}
.lightbox img{
  width:auto;height:auto;
  max-width:min(760px,88vw);max-height:88vh;
  object-fit:contain;border-radius:18px;
}
.lightbox-close{
  position:fixed;top:24px;right:28px;
  width:46px;height:46px;border:0;border-radius:50%;
  background:#fff;font-size:28px;cursor:pointer;
}

footer{
  padding:32px;text-align:center;
  border-top:1px solid #ded7cd;color:#77706a;font-size:12px;
}

@media(max-width:900px){
  .series-grid{grid-template-columns:1fr;max-width:720px}
  .series-collage{height:400px}
  .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .site-header{min-height:80px;padding:14px 18px}
  .back-button{padding:9px 13px;font-size:11px}
  .hero,.detail-hero{padding:62px 20px 38px}
  .series-grid,.gallery-grid{width:calc(100% - 28px);grid-template-columns:1fr}
  .series-collage{height:320px;padding:14px;gap:7px}
  .series-content{padding:24px}
  .series-content h2{font-size:25px}
  .lightbox{padding:18px}
}

/* 三個廣告系列：桌面版三欄 */
@media (min-width: 1050px){
  .series-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    max-width:1320px;
  }

  .series-collage{
    height:360px;
  }

  .series-content h2{
    font-size:26px;
  }
}

/* 中型螢幕維持兩欄 */
@media (min-width: 701px) and (max-width:1049px){
  .series-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* 四系列正式版配置：01～04 採 2 × 2 */
@media (min-width: 901px){
  .series-grid{
    width:min(1180px,calc(100% - 48px)) !important;
    max-width:1180px !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:30px !important;
  }

  .series-collage{
    height:430px !important;
  }

  .series-content h2{
    font-size:30px !important;
  }
}

/* 平板維持兩欄 */
@media (min-width: 601px) and (max-width:900px){
  .series-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* 手機單欄 */
@media (max-width:600px){
  .series-grid{
    grid-template-columns:1fr !important;
  }
}