
:root{
  --paper:#f5f1e9;
  --paper2:#ebe4da;
  --ink:#1d2928;
  --muted:#746f68;
  --accent:#cb6715;
  --line:rgba(29,41,40,.16);
  --max:1440px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","PingFang HK","Microsoft JhengHei","Noto Sans CJK TC","Heiti TC","Segoe UI",Arial,sans-serif;
  letter-spacing:.02em;
}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
.wrap{width:min(calc(100% - 48px),var(--max));margin:auto}
.nav{
  position:fixed;z-index:50;top:0;left:0;right:0;
  height:78px;display:flex;align-items:center;
  background:linear-gradient(to bottom,rgba(245,241,233,.95),rgba(245,241,233,.75),transparent);
  backdrop-filter:blur(10px);
}
.navin{display:flex;align-items:center;justify-content:space-between}
.brand{font-family:"Baskerville","Times New Roman","Songti TC","PMingLiU","Noto Serif CJK TC",serif;font-size:25px;letter-spacing:.12em}
.brand b{color:var(--accent);font-weight:500}
.menu{display:flex;gap:30px;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.menu a{position:relative;padding:8px 0}
.menu a:after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--accent);transition:.3s}
.menu a:hover:after{width:100%}
.hero{
  min-height:100svh;padding:120px 0 48px;
  display:grid;align-items:end;
}
.heroGrid{
  display:grid;grid-template-columns:1.06fr .94fr;gap:32px;align-items:stretch
}
.heroCopy{padding:9vh 3vw 4vh 0;display:flex;flex-direction:column;justify-content:space-between}
.kicker{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}
h1{
  margin:18px 0 26px;
  font-family:"Baskerville","Times New Roman","Songti TC","PMingLiU","Noto Serif CJK TC",serif;
  font-weight:400;font-size:clamp(58px,8vw,126px);
  line-height:.84;letter-spacing:-.055em
}
h1 span{display:block;font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","PingFang HK","Microsoft JhengHei","Noto Sans CJK TC","Heiti TC","Segoe UI",Arial,sans-serif;font-size:.28em;letter-spacing:.08em;margin-top:34px}
.heroText{max-width:560px;font-size:16px;line-height:2;color:#4d504c}
.heroMeta{margin-top:54px;display:flex;gap:28px;align-items:center;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.heroMeta .rule{width:90px;height:1px;background:var(--ink)}
.heroVisual{position:relative;min-height:720px;overflow:hidden;background:#d9d2c7}
.heroVisual img{filter:saturate(.75) contrast(.96)}
.heroVisual:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 45%,rgba(29,41,40,.14))}


.section{padding:120px 0;border-top:1px solid var(--line)}
.sectionHead{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;margin-bottom:60px}
.eyebrow{font-size:12px;letter-spacing:.22em;color:var(--accent);text-transform:uppercase}
.sectionTitle{font-family:"Baskerville","Times New Roman","Songti TC","PMingLiU","Noto Serif CJK TC",serif;font-size:clamp(42px,6vw,88px);font-weight:400;line-height:.95;margin:8px 0 0}
.lead{font-size:19px;line-height:1.9;margin:0;color:#3d413d;max-width:700px}
.projects{display:grid;grid-template-columns:1.2fr .8fr;gap:28px}
.project{position:relative;overflow:hidden;background:#ddd;min-height:520px}
.project.tall{min-height:760px}
.project img{transition:transform .7s ease;filter:saturate(.75)}
.project:hover img{transform:scale(1.025)}
.projectInfo{position:absolute;left:0;right:0;bottom:0;padding:32px;color:white;background:linear-gradient(transparent,rgba(0,0,0,.62))}
.projectInfo .num{font-size:11px;letter-spacing:.2em;opacity:.75}
.projectInfo h3{font-family:"Baskerville","Times New Roman","Songti TC","PMingLiU","Noto Serif CJK TC",serif;font-size:34px;font-weight:400;margin:8px 0 0}
.projectSide{display:grid;grid-template-rows:1fr 1fr;gap:28px}
.textCard{
  background:var(--ink);color:var(--paper);
  padding:42px;display:flex;flex-direction:column;justify-content:space-between
}
.textCard .big{font-family:"Baskerville","Times New Roman","Songti TC","PMingLiU","Noto Serif CJK TC",serif;font-size:44px;line-height:1.08;font-weight:400}
.textCard p{line-height:1.9;color:#d9d5cc}
.aboutGrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}
.portrait{aspect-ratio:4/5;overflow:hidden;background:#d9d2c7}
.portrait img{filter:saturate(.78)}
.aboutCopy h3{font-size:14px;letter-spacing:.16em;color:var(--accent);font-weight:500}
.aboutCopy h2{font-family:"Baskerville","Times New Roman","Songti TC","PMingLiU","Noto Serif CJK TC",serif;font-size:clamp(44px,5vw,76px);font-weight:400;margin:12px 0 30px;line-height:1}
.aboutCopy p{font-size:17px;line-height:2;color:#4c4c47}
.credentials{margin-top:34px;padding-top:28px;border-top:1px solid var(--line);display:grid;gap:10px;font-size:13px;line-height:1.7}
.credentials span{color:var(--muted)}
.processGrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}
.materialPhoto{position:sticky;top:110px;aspect-ratio:3/5;overflow:hidden}
.steps{counter-reset:step;border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:85px 1fr;gap:18px;padding:30px 0;border-bottom:1px solid var(--line)}
.stepNo{font-family:"Baskerville","Times New Roman","Songti TC","PMingLiU","Noto Serif CJK TC",serif;color:var(--accent);font-size:28px}
.step h3{margin:0 0 8px;font-size:20px;font-weight:500}
.step p{margin:0;color:#66615b;line-height:1.85}
.contact{background:var(--ink);color:var(--paper);padding:120px 0}
.contactGrid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px}
.contact h2{font-family:"Baskerville","Times New Roman","Songti TC","PMingLiU","Noto Serif CJK TC",serif;font-weight:400;font-size:clamp(58px,8vw,120px);line-height:.9;margin:0}
.contact h2 em{color:var(--accent);font-style:normal}
.contactBox{align-self:end;border-top:1px solid rgba(255,255,255,.25);padding-top:26px}
.contactBox p{color:#c7c1b8;line-height:1.9}
.cta{display:inline-flex;align-items:center;gap:18px;margin-top:20px;padding:14px 0;border-bottom:1px solid var(--accent);color:white;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.footer{background:var(--ink);color:#a8a39b;border-top:1px solid rgba(255,255,255,.12);padding:24px 0;font-size:11px;letter-spacing:.12em}
.footer .wrap{display:flex;justify-content:space-between}
.reveal{opacity:1;transform:none}
.reveal.show{opacity:1;transform:none}
@media (max-width:900px){
  .wrap{width:min(calc(100% - 28px),var(--max))}
  .nav{height:64px}.menu{display:none}
  .hero{padding-top:88px}
  .heroGrid,.sectionHead,.aboutGrid,.processGrid,.contactGrid{grid-template-columns:1fr}
  .heroVisual{min-height:58vh;order:-1}
  .heroCopy{padding:20px 0 0}
  h1{font-size:clamp(52px,17vw,88px)}
  .section{padding:84px 0}
  .projects{grid-template-columns:1fr}
  .project.tall,.project{min-height:62vh}
  .projectSide{grid-template-rows:auto auto}
  .textCard{min-height:360px}
  .materialPhoto{position:relative;top:auto;aspect-ratio:4/5}
  .contact{padding:84px 0}
  .footer .wrap{gap:10px;flex-direction:column}
}

/* Font-safe rendering */
html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}
button, input, textarea, select { font: inherit; }

.brandQuote{margin:0 0 30px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.brandQuote.second{margin-top:8px}
.brandQuote strong{
  display:block;color:var(--accent);font-size:16px;font-weight:500;
  letter-spacing:.08em;margin-bottom:10px
}
.brandQuote p{margin:0;font-size:16px;line-height:2;color:#4c4c47}
.manifesto{padding:36px 0 58px}
.manifestoGrid{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:24px 0;display:flex;align-items:center;justify-content:space-between;gap:32px
}
.manifestoMark{font-size:12px;letter-spacing:.24em;color:var(--accent);white-space:nowrap}
.manifesto p{margin:0;font-family:"Baskerville","Times New Roman","Songti TC","PMingLiU","Noto Serif CJK TC",serif;font-size:26px;line-height:1.55}
.step .goal{color:#a96c3f;font-size:13px;letter-spacing:.04em;margin-bottom:12px}
.step ul{margin:0;padding-left:1.1em;color:#66615b;line-height:1.9}
.step li{margin:2px 0}
@media(max-width:900px){
  .manifestoGrid{align-items:flex-start;flex-direction:column}
  .manifesto p{font-size:22px}
  .step{grid-template-columns:58px 1fr}
}

.bookingSection{background:var(--paper2)}
.bookingNote{margin:16px 0 0;color:var(--muted);font-size:12px}
.bookingForm{
  border-top:1px solid var(--line);
  padding-top:38px;
}
.formGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px 32px;
}
.field{display:flex;flex-direction:column;gap:10px}
.field span,.field legend{
  font-size:12px;
  letter-spacing:.12em;
  color:var(--ink);
}
.field input,.field select,.field textarea{
  width:100%;
  border:0;
  border-bottom:1px solid rgba(29,41,40,.35);
  background:transparent;
  border-radius:0;
  padding:13px 0 14px;
  color:var(--ink);
  font:inherit;
  font-size:15px;
  outline:none;
  transition:border-color .2s ease;
}
.field textarea{
  border:1px solid rgba(29,41,40,.28);
  padding:16px;
  resize:vertical;
  min-height:160px;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}
.field input::placeholder,.field textarea::placeholder{color:#969087}
.field select{appearance:auto}
.full{grid-column:1/-1}
.servicesField{
  border:0;
  margin:2px 0 0;
  padding:0;
}
.servicesField legend{margin-bottom:14px}
.checkGrid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.checkGrid label{
  display:flex;
  align-items:center;
  gap:9px;
  padding:14px;
  border:1px solid var(--line);
  font-size:14px;
  cursor:pointer;
}
.checkGrid input,.consent input{accent-color:var(--accent)}
.consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:#5e5a54;
  font-size:13px;
  line-height:1.7;
}
.formActions{
  margin-top:34px;
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
}
.submitBtn{
  border:0;
  background:var(--ink);
  color:var(--paper);
  padding:18px 24px;
  font:inherit;
  font-size:13px;
  letter-spacing:.14em;
  cursor:pointer;
  transition:.25s ease;
}
.submitBtn:hover{background:var(--accent)}
.submitBtn span{margin-left:14px}
.formStatus{margin:0;font-size:13px;color:var(--muted)}
.formStatus.error{color:#9b3d2d}
.formStatus.success{color:#466b55}
@media(max-width:900px){
  .formGrid{grid-template-columns:1fr}
  .full{grid-column:1}
  .checkGrid{grid-template-columns:1fr 1fr}
}
@media(max-width:540px){
  .checkGrid{grid-template-columns:1fr}
}

.socialNav{color:var(--accent)}
.socialLinks{
  margin-top:28px;
  display:flex;
  gap:24px;
  flex-wrap:wrap;
}
.socialLinks a{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--paper);
  border-bottom:1px solid rgba(255,255,255,.25);
  padding-bottom:6px;
}
.socialLinks a:hover{border-color:var(--accent);color:#fff}
.footerInner{align-items:center}
.footerSocial{
  display:flex;
  gap:18px;
}
.footerSocial a{
  color:#c6c0b6;
  font-size:10px;
  letter-spacing:.14em;
}
.footerSocial a:hover{color:var(--paper)}
@media(max-width:900px){
  .footerInner{align-items:flex-start}
  .footerSocial{order:3;margin-top:4px}
}

/* Simplified navigation */
.desktopNav{
  display:flex;
  align-items:center;
  gap:28px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.desktopNav a{
  position:relative;
  padding:8px 0;
}
.desktopNav a:not(.bookingCta):after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:0;height:1px;
  background:var(--accent);
  transition:.25s ease;
}
.desktopNav a:not(.bookingCta):hover:after{width:100%}
.bookingCta{
  margin-left:8px;
  padding:11px 16px !important;
  border:1px solid var(--ink);
  text-transform:none;
  letter-spacing:.08em;
  transition:.25s ease;
}
.bookingCta:hover{
  background:var(--ink);
  color:var(--paper);
}
.menuToggle{
  display:none;
  border:0;
  background:transparent;
  color:var(--ink);
  font-size:26px;
  line-height:1;
  cursor:pointer;
  padding:6px;
}
.mobileMenu{
  display:none;
}
.mobileStickyCta{
  display:none;
}

@media(max-width:900px){
  .desktopNav{display:none}
  .menuToggle{display:block}
  .mobileMenu{
    position:fixed;
    top:64px;left:0;right:0;
    z-index:49;
    background:rgba(245,241,233,.98);
    backdrop-filter:blur(12px);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:22px 24px 26px;
    flex-direction:column;
    gap:2px;
  }
  .mobileMenu.open{display:flex}
  .mobileMenu > a{
    padding:14px 0;
    border-bottom:1px solid var(--line);
    font-size:13px;
    letter-spacing:.16em;
  }
  .mobileMenu .mobileBooking{
    margin-top:10px;
    border:0;
    background:var(--ink);
    color:var(--paper);
    text-align:center;
    padding:15px;
    letter-spacing:.08em;
  }
  .mobileSocial{
    display:flex;
    gap:18px;
    margin-top:16px;
    padding-top:4px;
  }
  .mobileSocial a{
    font-size:10px;
    letter-spacing:.14em;
    color:var(--muted);
  }
  .mobileStickyCta{
    display:block;
    position:fixed;
    left:14px;
    right:14px;
    bottom:14px;
    z-index:45;
    background:var(--ink);
    color:var(--paper);
    text-align:center;
    padding:15px 18px;
    font-size:13px;
    letter-spacing:.12em;
    box-shadow:0 10px 30px rgba(0,0,0,.14);
  }
  body{padding-bottom:72px}
}

/* Projects entry link */
.viewProjectsLink{
  margin-top:34px;
  display:inline-grid;
  grid-template-columns:auto auto;
  grid-template-areas:
    "zh arrow"
    "en arrow";
  column-gap:18px;
  align-items:center;
  width:max-content;
  padding:6px 0 12px;
  border-bottom:1px solid var(--ink);
  transition:.25s ease;
}
.viewProjectsZh{
  grid-area:zh;
  font-size:14px;
  letter-spacing:.16em;
  font-weight:400;
}
.viewProjectsEn{
  grid-area:en;
  margin-top:5px;
  font-family:"Baskerville","Times New Roman","Songti TC","PMingLiU","Noto Serif CJK TC",serif;
  font-size:11px;
  letter-spacing:.18em;
  color:var(--muted);
}
.viewProjectsArrow{
  grid-area:arrow;
  font-family:"Baskerville","Times New Roman",serif;
  font-size:28px;
  line-height:1;
  transition:transform .25s ease, color .25s ease;
}
.viewProjectsLink:hover{
  color:var(--accent);
  border-color:var(--accent);
}
.viewProjectsLink:hover .viewProjectsArrow{
  transform:translate(3px,3px);
  color:var(--accent);
}
#project-showcase{scroll-margin-top:96px}

@media(max-width:900px){
  .viewProjectsLink{margin-top:26px}
  .viewProjectsZh{font-size:13px}
}

/* Dedicated Projects page */
.projectsPage{background:var(--paper)}
.projectsPage .nav{background:rgba(245,241,233,.96)}
.desktopNav .active{color:var(--accent)}
.projectsMain{padding-top:78px}
.projectsIntro{padding:96px 0 72px}
.projectsIntroGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:end;
  border-bottom:1px solid var(--line);
  padding-bottom:56px;
}
.projectsPageTitle{
  margin:12px 0 0;
  font-family:"Baskerville","Times New Roman","Songti TC","PMingLiU","Noto Serif CJK TC",serif;
  font-size:clamp(64px,10vw,150px);
  font-weight:400;
  line-height:.85;
  letter-spacing:-.05em;
}
.projectsIntroCopy{
  max-width:560px;
  justify-self:end;
  font-size:16px;
  line-height:1.95;
  color:#4d504c;
}
.projectsIntroCopy p{margin:0 0 10px}
.projectsArchive{padding:0 0 120px}
.projectsArchiveGrid{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:28px;
}
.archiveCard{min-width:0}
.archiveCard.featured{grid-row:span 2}
.archiveImage{
  overflow:hidden;
  background:#d8d1c7;
}
.featured .archiveImage{aspect-ratio:4/5}
.archiveCard:not(.featured) .archiveImage{aspect-ratio:4/3}
.archiveImage img{
  transition:transform .6s ease;
  filter:saturate(.85);
}
.archiveCard:hover .archiveImage img{transform:scale(1.015)}
.archiveMeta{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:14px 0 0;
  font-size:10px;
  letter-spacing:.16em;
  color:var(--muted);
}
.textPlaceholder{
  border-top:1px solid var(--line);
  display:flex;
  align-items:flex-end;
  min-height:310px;
}
.placeholderInner{padding:32px 0 6px}
.placeholderInner h2{
  margin:10px 0 14px;
  font-size:30px;
  font-weight:400;
}
.placeholderInner p{
  margin:0;
  max-width:420px;
  line-height:1.9;
  color:#66615b;
}
@media(max-width:900px){
  .projectsMain{padding-top:64px}
  .projectsIntro{padding:64px 0 48px}
  .projectsIntroGrid,
  .projectsArchiveGrid{grid-template-columns:1fr}
  .projectsIntroGrid{gap:30px}
  .projectsIntroCopy{justify-self:start}
  .featured .archiveImage{aspect-ratio:4/5}
  .archiveCard:not(.featured) .archiveImage{aspect-ratio:4/3}
  .projectsArchive{padding-bottom:90px}
}

/* Gallery-style Projects page */
.gallerySection{padding:0 0 120px}
.projectFilters{
  position:sticky;
  top:78px;
  z-index:20;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding:18px 0;
  background:rgba(245,241,233,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  margin-bottom:34px;
}
.filterBtn{
  border:0;
  background:transparent;
  color:var(--muted);
  padding:8px 12px;
  font:inherit;
  font-size:11px;
  letter-spacing:.15em;
  cursor:pointer;
}
.filterBtn.active,.filterBtn:hover{
  color:var(--ink);
  border-bottom:1px solid var(--accent);
}
.galleryGrid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:28px;
  align-items:start;
}
.galleryCard{
  grid-column:span 5;
  display:block;
  min-width:0;
}
.galleryCard.wide{grid-column:span 7}
.galleryCard.tallCard{grid-column:span 5}
.galleryCard.hidden{display:none}
.galleryImage{
  aspect-ratio:4/5;
  overflow:hidden;
  background:#d8d0c4;
}
.galleryCard.wide .galleryImage{aspect-ratio:7/5}
.galleryImage img{
  transition:transform .55s ease;
  filter:saturate(.84);
}
.galleryCard:hover .galleryImage img{transform:scale(1.018)}
.galleryCaption{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:end;
  padding:14px 0 10px;
  border-bottom:1px solid var(--line);
}
.galleryCategory{
  font-size:10px;
  letter-spacing:.18em;
  color:var(--accent);
}
.galleryCaption h2{
  margin:5px 0 0;
  font-size:20px;
  font-weight:400;
}
.galleryArrow{
  font-size:10px;
  letter-spacing:.15em;
  color:var(--muted);
}
.placeholderCard{
  min-height:340px;
  border:1px solid var(--line);
  background:var(--paper2);
  display:flex;
}
.galleryPlaceholder{
  width:100%;
  min-height:340px;
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.tallCard .galleryPlaceholder{min-height:470px}
.galleryPlaceholder span{
  font-size:10px;
  letter-spacing:.16em;
  color:var(--accent);
}
.galleryPlaceholder strong{
  margin-top:8px;
  font-family:"Baskerville","Times New Roman","Songti TC","PMingLiU","Noto Serif CJK TC",serif;
  font-size:34px;
  font-weight:400;
}
.galleryPlaceholder small{
  margin-top:8px;
  color:var(--muted);
  font-size:12px;
}

/* Project detail */
.detailMain{padding-top:78px}
.detailHero{padding-top:56px}
.backLink{
  display:inline-block;
  margin-bottom:52px;
  font-size:10px;
  letter-spacing:.16em;
  color:var(--muted);
}
.detailTitleRow{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:60px;
  align-items:end;
  padding-bottom:42px;
}
.detailTitle{
  margin:10px 0 0;
  font-family:"Baskerville","Times New Roman","Songti TC","PMingLiU","Noto Serif CJK TC",serif;
  font-size:clamp(54px,8vw,110px);
  line-height:.95;
  font-weight:400;
}
.detailMeta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  border-top:1px solid var(--line);
  padding-top:18px;
}
.detailMeta div{display:flex;flex-direction:column;gap:8px}
.detailMeta span{
  font-size:9px;
  letter-spacing:.16em;
  color:var(--muted);
}
.detailMeta strong{font-size:13px;font-weight:400}
.detailHeroImage{
  width:100%;
  height:min(78vh,880px);
  overflow:hidden;
}
.detailHeroImage img{object-position:center}
.detailBody{padding:100px 0}
.detailBodyGrid{
  display:grid;
  grid-template-columns:.34fr .66fr;
  gap:70px;
  align-items:start;
}
.detailAside{
  position:sticky;
  top:110px;
  border-top:1px solid var(--line);
  padding-top:20px;
}
.detailAside p{
  font-size:14px;
  line-height:1.95;
  color:#5c5954;
}
.detailGallery{
  display:grid;
  gap:34px;
}
.detailFigure{
  margin:0;
  aspect-ratio:4/5;
  overflow:hidden;
  background:#ddd;
}
.detailFigure.landscape{aspect-ratio:4/3}
.nextProject{
  padding:70px 0 110px;
  border-top:1px solid var(--line);
}
.nextProject a{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
}
.nextProject span{
  font-size:10px;
  letter-spacing:.16em;
  color:var(--muted);
}
.nextProject strong{
  font-family:"Baskerville","Times New Roman","Songti TC","PMingLiU","Noto Serif CJK TC",serif;
  font-size:34px;
  font-weight:400;
}

@media(max-width:900px){
  .projectFilters{top:64px;overflow-x:auto;flex-wrap:nowrap}
  .filterBtn{white-space:nowrap}
  .galleryGrid{grid-template-columns:1fr;gap:34px}
  .galleryCard,.galleryCard.wide,.galleryCard.tallCard{grid-column:1}
  .galleryCard.wide .galleryImage,.galleryImage{aspect-ratio:4/5}
  .placeholderCard,.galleryPlaceholder,.tallCard .galleryPlaceholder{min-height:300px}
  .detailMain{padding-top:64px}
  .detailTitleRow,.detailBodyGrid{grid-template-columns:1fr}
  .detailTitleRow{gap:30px}
  .detailMeta{grid-template-columns:1fr 1fr}
  .detailHeroImage{height:58vh}
  .detailBody{padding:70px 0}
  .detailAside{position:relative;top:auto}
  .nextProject a{align-items:flex-start;flex-direction:column}
}

.projectConceptTitle{
  margin:14px 0 18px;
  font-family:"Baskerville","Times New Roman","Songti TC","PMingLiU","Noto Serif CJK TC",serif;
  font-size:28px;
  line-height:1.45;
  font-weight:400;
}
.projectPoints{
  margin-top:32px;
  border-top:1px solid var(--line);
}
.projectPoints > div{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:14px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
}
.projectPoints span{
  color:var(--accent);
  font-family:"Baskerville","Times New Roman",serif;
  font-size:18px;
}
.projectPoints p{
  margin:0;
  color:#5c5954;
  font-size:13px;
  line-height:1.85;
}

/* Portrait project imagery */
.detailHeroImage.portraitHero{
  height:min(82vh,980px);
  background:#171713;
}
.detailHeroImage.portraitHero img{
  object-fit:contain;
  object-position:center;
}
.detailFigure.portraitFigure{
  aspect-ratio:9/16;
  max-width:760px;
  justify-self:center;
  width:100%;
  background:#171713;
}
.detailFigure.portraitFigure img{
  object-fit:contain;
}
@media(max-width:900px){
  .detailHeroImage.portraitHero{height:72vh}
}

/* Yuanshan West Passage detail hero: intentional black cover block */
.yuanshanBlackHero{
  background:#000;
}
/* 希望服務內容 */
.servicesField {
  width: 100%;
  max-width: 100%;
}

.checkGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.checkGrid label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;

  min-width: 0;
  width: 100%;
  box-sizing: border-box;

  padding: 14px 16px;

  border: 1px solid rgba(29, 41, 40, 0.18);
  border-radius: 2px;

  font-size: 14px;
  line-height: 1.5;

  cursor: pointer;
}

.checkGrid input[type="checkbox"] {
  width: 18px !important;
  height: 18px;
  min-width: 18px;

  margin: 0;
  padding: 0;

  flex: 0 0 18px;
}

/* 手機版 */
@media (max-width: 540px) {
  .checkGrid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .checkGrid label {
    padding: 15px 14px;
    font-size: 15px;
  }
}
.checkGrid label:hover {
  border-color: #cb6715;
}

.checkGrid label:has(input:checked) {
  border-color: #cb6715;
  background: rgba(203, 103, 21, 0.06);
}
<link rel="icon" href="favicon.ico">
