/* 传承系列画册 — 只作用于 heritage.html */
@font-face{font-family:"WXJ Serif";src:url(../assets/brand/fonts/SourceHanSerifSC-Light.subset.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"WXJ Serif";src:url(../assets/brand/fonts/SourceHanSerifSC-Regular.subset.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"WXJ Serif";src:url(../assets/brand/fonts/SourceHanSerifSC-Medium.subset.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"WXJ Latin";src:url(../assets/brand/fonts/CormorantGaramond.subset.woff2) format("woff2");font-weight:300 700;font-display:swap}

body.hx-page{background:#0e0d0c}
.hx-root{
  --ink:#141311; --ink-deep:#0e0d0c;
  --ivory:#f3ece0; --ivory-deep:#e7dece;
  --gold:#c9a96e; --gold-ink:#9c7d45;
  --on-dark:#ece4d6; --on-dark-2:rgba(236,228,214,.62);
  --on-ivory:#28231e; --on-ivory-2:#6d6356;
  --serif:"WXJ Serif","Source Han Serif SC","Noto Serif SC","Songti SC","STSong",serif;
  --latin:"WXJ Latin","Cormorant Garamond","Times New Roman",serif;
  --side:64px; --measure:1120px; --header:var(--header-h,4.25rem);
  display:block; flex:1 0 auto;
  padding-top:var(--header);
  background:var(--ink); color:var(--on-dark);
  font-family:var(--serif); font-weight:400; line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
.hx-root *{box-sizing:border-box}
.hx-root img{display:block;max-width:100%;height:auto}
.hx-root a{color:inherit;text-decoration:none}
.hx-root h1,.hx-root h2{font-family:var(--serif);font-weight:300}
.hx-root figure{margin:0}
.hx-m{display:none}
.hx-num{font-family:var(--latin);font-weight:500;color:var(--gold);letter-spacing:.12em;font-size:15px}

.hx-zoom{
  display:flex; align-items:center; justify-content:center;
  width:auto; max-width:100%; margin-inline:auto;
  padding:0; border:0; background:none;
  cursor:zoom-in; color:inherit; font:inherit; text-align:inherit;
}
.hx-zoom:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
.hx-zoom img{
  width:auto; height:auto; max-width:100%;
  max-height:min(68vh,740px);
  object-fit:contain;
}

/* —— 封面：一张满幅，标题压在画面左下 —— */
.hx-hero{
  position:relative;
  height:calc(100svh - var(--header)); min-height:560px;
  background:#0e0d0c; color:#f3ece0; overflow:hidden;
}
.hx-hero__plate{
  position:absolute; inset:0;
  display:block; width:100%; height:100%;
  border:0; padding:0; background:#2a2118; cursor:zoom-in;
}
.hx-hero__move{
  display:block; width:100%; height:118%; margin-top:-6%;
  will-change:transform;
}
.hx-hero__plate img{
  width:100%; height:100%; max-width:none; max-height:none;
  object-fit:cover; object-position:center 62%;
}
.hx-hero__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(80% 90% at 0% 100%, rgba(6,5,4,.7) 0%, rgba(6,5,4,.28) 34%, rgba(6,5,4,0) 62%);
}
.hx-hero__copy{
  position:absolute; z-index:2; pointer-events:none;
  left:clamp(40px, 5.5vw, 88px);
  bottom:clamp(44px, 8vh, 92px);
}
.hx-hero__brand{
  margin:0 0 18px;
  font-size:15px; font-weight:400; line-height:1;
  letter-spacing:.48em; color:#f3ece0;
}
.hx-hero__rule{
  display:block; width:36px; height:1px; margin:0 0 20px;
  background:#c9a96e; transform-origin:left center;
}
.hx-hero h1{
  margin:0;
  font-size:clamp(68px, 6.4vw, 108px); font-weight:300;
  line-height:.96; letter-spacing:.08em; color:#f7f1e6;
}
.hx-hero h1 span{display:block; white-space:nowrap}

/* —— 设计师 —— */
.hx-paper{background:transparent;color:inherit}
.hx-profile{padding:88px var(--side) 96px}
.hx-profile__inner{width:min(100%,1040px);margin-inline:auto}
.hx-profile__lead{
  margin:0 0 36px; text-align:center;
  font-size:16px; letter-spacing:.24em; color:rgba(236,228,214,.78);
}
.hx-profile__card{
  display:grid; grid-template-columns:280px minmax(0,1fr);
  gap:40px 48px; align-items:stretch;
  padding:28px 32px 28px 28px;
  background:#1a1612;
  border:1px solid rgba(201,169,110,.62);
  box-shadow:0 0 0 7px #141311, 0 0 0 8px rgba(201,169,110,.5);
}
.hx-profile__photo{
  width:100%; height:100%; min-height:0; padding:0; border:0; overflow:hidden;
  background:#100e0c; cursor:zoom-in;
}
.hx-profile__photo img{
  width:100%; height:100%; max-width:none; max-height:none;
  object-fit:cover; object-position:center 22%;
}
.hx-profile__name{margin:0;font-size:34px;letter-spacing:.2em;line-height:1.2;font-weight:400;color:#f4ede1}
.hx-profile__name em{
  font-family:var(--latin); font-style:normal; font-weight:500;
  letter-spacing:.16em; margin-left:.4em;
}
.hx-profile__role{margin:16px 0 0;font-size:14px;letter-spacing:.14em;color:#c9a96e}
.hx-profile__role i{margin:0 .4em;letter-spacing:0;font-style:normal}
.hx-profile__role em{font-family:var(--latin);font-style:italic;letter-spacing:.04em}
.hx-profile__body{margin-top:28px}
.hx-profile__body p{
  margin:0 0 16px; font-size:17px; font-weight:500; line-height:2;
  letter-spacing:.04em; color:#fff6ea;
}
.hx-profile__body p:last-child{margin-bottom:0}

/* —— 一件 —— */
.hx-work{scroll-margin-top:calc(var(--header) + 18px)}
.hx-work + .hx-work::before{
  content:""; display:block; width:min(100% - 2*var(--side), 1080px); height:1px;
  margin:48px auto 0; background:var(--gold);
}
.hx-work + .hx-work .hx-work__head{padding-top:36px}
.hx-work__head{
  width:min(100% - 2*var(--side), var(--measure));
  margin:0 auto; padding:88px 0 32px;
  display:flex; align-items:baseline; justify-content:center; gap:18px;
}
.hx-work__head h2{margin:0;font-size:clamp(34px,3.6vw,52px);letter-spacing:.22em;line-height:1.15;color:#f4ede1}
.hx-stage{
  width:min(100% - 2*var(--side), 1080px);
  margin:0 auto; padding-bottom:16px;
}
.hx-pair{
  display:flex; justify-content:center; align-items:flex-end;
  gap:clamp(16px,2.6vw,40px);
}
.hx-pair .hx-zoom img{max-width:min(42vw,520px);max-height:min(62vh,680px)}
.hx-stack{display:flex;flex-direction:column;align-items:center;gap:36px}
.hx-stack .hx-zoom img{max-width:min(100%,820px);max-height:min(58vh,620px)}
.hx-split{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:28px}
.hx-split .hx-zoom img{max-width:min(44vw,480px);max-height:min(46vh,420px)}
.hx-trio{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:16px; margin-top:28px; align-items:center;
}
.hx-trio .hx-zoom{width:100%}
.hx-trio .hx-zoom img{width:auto;max-width:100%;max-height:min(32vh,300px)}
.hx-solo{width:min(100%,760px);margin-inline:auto}
.hx-solo img{max-width:min(100%,760px);max-height:min(64vh,700px)}

.hx-sheet{
  display:flex; flex-direction:column; align-items:center;
  padding:36px var(--side) 56px;
}
.hx-sheet + .hx-sheet{padding-top:8px}
.hx-sheet .hx-zoom img{
  max-width:min(100%,720px);
  max-height:min(74vh,820px);
  box-shadow:0 24px 50px rgba(0,0,0,.45);
}
@media (min-width:761px){
  .hx-sheet + .hx-sheet .hx-zoom img{
    width:min(100%,720px);
    max-width:min(100%,720px);
    max-height:none;
    height:auto;
  }
}
.hx-kind{
  order:-1;
  width:min(100%,720px); margin:0 auto 22px;
  display:flex; align-items:center; justify-content:center; gap:16px;
  font-size:13px; letter-spacing:.5em; padding-left:.5em; color:var(--gold);
}
.hx-kind:before,
.hx-kind:after{
  content:""; width:28px; height:1px; background:currentColor; flex:none;
}

/* —— 单图成器：一行两件 —— */
.hx-gallery{
  width:min(100% - 2*var(--side), 1180px);
  margin:0 auto; padding:36px 0 48px;
  display:grid; grid-template-columns:1fr 1fr;
  gap:52px 36px; align-items:start;
}
.hx-gallery::before{
  content:""; grid-column:1 / -1; justify-self:stretch;
  width:100%; height:1px; margin:4px 0 8px; background:var(--gold);
}
.hx-plate{
  position:relative;
  width:100%; margin:0; padding:0;
  scroll-margin-top:calc(var(--header) + 12px);
  display:flex; flex-direction:column; align-items:center;
}
.hx-gallery .hx-frame,
.hx-gallery .hx-zoom{width:100%}
.hx-gallery .hx-plate:last-child:nth-child(odd){grid-column:1 / -1}
.hx-gallery .hx-plate:last-child:nth-child(odd) .hx-frame{width:min(100%,calc((100% - 36px) / 2))}
@media (min-width:761px){
  .hx-gallery .hx-plate:nth-child(odd):not(:first-child)::before{
    content:""; position:absolute; z-index:1; top:-26px; left:0;
    width:calc(200% + 36px); height:1px;
    background:var(--gold); pointer-events:none;
  }
  .hx-gallery .hx-plate:last-child:nth-child(odd)::before{left:0;width:100%}
}
.hx-gallery .hx-zoom img{
  width:auto; max-width:100%;
  max-height:min(46vh,480px);
}
.hx-plate .hx-frame--land img{max-width:100%;max-height:min(46vh,480px)}
.hx-plate .hx-frame--sq img{max-width:min(100%,480px);max-height:min(46vh,480px)}
.hx-plate .hx-frame--port img{max-width:100%;max-height:min(70vh,640px)}
.hx-plate figcaption{
  margin:18px auto 0;
  display:flex; align-items:center; justify-content:center; gap:14px;
  font-size:15px; letter-spacing:.32em; padding-left:.32em;
}
.hx-plate figcaption:before,
.hx-plate figcaption:after{
  content:""; width:22px; height:1px; background:var(--gold); flex:none;
}

.hx-quiet{padding:28px 0 56px}
.hx-quiet__rule{
  display:block; width:min(100% - 2*var(--side), 1180px); height:1px;
  margin:20px auto 8px; background:var(--gold);
}
.hx-quiet__ports{
  width:min(100% - 2*var(--side), 1180px);
  margin:28px auto 12px;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:28px 22px; align-items:center;
}
.hx-quiet__ports .hx-frame,
.hx-quiet__ports .hx-zoom{width:100%}
.hx-quiet__ports .hx-frame--port img,
.hx-quiet__ports .hx-frame--land img,
.hx-quiet__ports .hx-frame--sq img{
  width:auto; max-width:100%;
  max-height:min(52vh,520px);
}

/* —— 跋 —— */
.hx-colophon{
  margin:0; padding:120px var(--side) 8px;
  text-align:center;
}
.hx-colophon p{
  margin:0 auto;
  font-weight:300;
  font-size:clamp(20px, 2vw, 26px);
  line-height:2.2;
  letter-spacing:.18em;
  color:#f4ede1;
}
.hx-colophon span{display:block}
.hx-colophon span:last-child{margin-top:.15em; letter-spacing:.32em}
.hx-close{
  padding:64px var(--side) 48px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  color:var(--on-dark);
}
.hx-close img{width:min(100%,280px);height:auto}
.hx-close p{margin:32px 0 0;display:flex;align-items:center;gap:22px;font-size:18px;letter-spacing:.64em;padding-left:.64em;font-weight:300}
.hx-close p i{width:56px;height:1px;background:var(--gold);opacity:.85}
.hx-close a{margin-top:36px;font-size:14px;letter-spacing:.42em;color:var(--gold)}
.hx-close a:hover{color:#f4ede1}

.hx-progress{
  position:fixed; top:var(--header); left:0; z-index:30;
  width:0; height:1px; background:var(--gold);
  pointer-events:none;
}
.hx-rv-on .hx-root .rv{
  opacity:0; transform:translateY(28px);
  transition:opacity .9s ease, transform 1.05s cubic-bezier(.16,.84,.32,1);
}
.hx-rv-on .hx-root .rv.in{opacity:1;transform:none}
.hx-rv-on .hx-root .rv .hx-zoom img{
  transform:scale(1.045);
  transition:transform 1.35s cubic-bezier(.16,.84,.32,1);
}
.hx-rv-on .hx-root .rv.in .hx-zoom img{transform:none}
.hx-rv-on .hx-root .rv .hx-zoom:nth-child(2) img{transition-delay:.14s}
.hx-rv-on .hx-root .rv .hx-kind{
  opacity:0; transform:translateY(10px);
  transition:opacity .7s ease .2s, transform .7s cubic-bezier(.16,.84,.32,1) .2s;
}
.hx-rv-on .hx-root .rv.in .hx-kind{opacity:1;transform:none}
@keyframes hx-up{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}
@keyframes hx-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes hx-cover{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
.hx-rv-on .hx-hero__copy > *{animation:hx-up 1s cubic-bezier(.16,.84,.32,1) both}
.hx-rv-on .hx-hero__brand{animation-delay:.08s}
.hx-rv-on .hx-hero__rule{animation:hx-line .9s cubic-bezier(.16,.84,.32,1) .28s both}
.hx-rv-on .hx-hero h1{animation-delay:.36s}
.hx-rv-on .hx-hero__plate img{animation:hx-cover 1.7s cubic-bezier(.16,.84,.32,1) both}

.hx-light{display:none}
.hx-light[open]{
  width:100vw; height:100vh; max-width:none; max-height:none;
  margin:0; padding:0; border:0;
  background:transparent;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; touch-action:none; overscroll-behavior:none;
}
.hx-light::backdrop{background:transparent}
.hx-light__veil{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:rgba(10,9,8,.94);
  opacity:0; transition:opacity .52s ease;
}
.hx-light.is-in .hx-light__veil{opacity:1}
.hx-light.is-out .hx-light__veil{opacity:0; transition-duration:.44s}
.hx-light__stage{
  position:relative; z-index:1;
  flex:1 1 auto; align-self:stretch;
  width:100%; height:100%; min-width:0; min-height:0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; touch-action:none;
}
.hx-light img{
  max-width:min(1200px,94vw); max-height:92vh; width:auto; height:auto;
  object-fit:contain; transform-origin:center center;
  touch-action:none; user-select:none; -webkit-user-drag:none;
}
.hx-light__x{
  position:fixed; top:18px; right:22px; z-index:3;
  border:0; background:none; color:#f4ede1;
  font-family:var(--serif,"Songti SC",serif); font-size:14px; letter-spacing:.32em;
  cursor:pointer; touch-action:manipulation;
  opacity:0; transition:opacity .4s ease;
}
.hx-light.is-in .hx-light__x{opacity:1}
.hx-light.is-out .hx-light__x{opacity:0; transition-duration:.28s}
.hx-light__x:focus-visible{outline:1px solid var(--gold);outline-offset:4px}

@media (max-width:760px){
  .hx-root{--side:20px}
  .hx-progress{display:none}
  .hx-hero{
    display:flex; flex-direction:column;
    height:calc(100svh - var(--header) - 4.1rem); min-height:0;
  }
  .hx-hero__plate{
    position:relative; inset:auto; flex:1; min-height:0;
    width:100%; height:auto; aspect-ratio:auto;
  }
  .hx-hero__move{height:100%; margin-top:0}
  .hx-hero__plate img{object-fit:cover; object-position:54% 58%}
  .hx-hero__veil{display:none}
  .hx-hero__copy{
    position:relative; left:auto; right:auto; bottom:auto;
    flex:none; display:flex; flex-direction:column;
    align-items:center; justify-content:center; text-align:center;
    width:100%; padding:40px 20px 32px;
  }
  .hx-rv-on .hx-hero__rule{animation:none}
  .hx-hero__brand{
    font-size:13px; letter-spacing:.5em; padding-left:.5em;
    margin:0 0 14px; text-align:center;
  }
  .hx-hero__rule{width:48px; margin:0 0 18px}
  .hx-hero h1{
    font-size:58px; font-weight:300; line-height:1.02;
    letter-spacing:.16em; padding-left:.16em;
  }
  .hx-hero h1 span{display:block}
  .hx-profile{padding:48px var(--side) 56px}
  .hx-profile__lead{margin-bottom:22px;font-size:14px;line-height:1.9;letter-spacing:.04em}
  .hx-m{display:block}
  .hx-profile__card{
    grid-template-columns:1fr; gap:18px;
    padding:20px 16px 22px;
    box-shadow:0 0 0 5px #141311, 0 0 0 6px rgba(201,169,110,.45);
  }
  .hx-profile__photo{width:168px;height:208px;margin-inline:auto}
  .hx-profile__name,
  .hx-profile__role{text-align:center}
  .hx-profile__name{font-size:26px;letter-spacing:.12em}
  .hx-profile__body p{font-size:16px;line-height:1.85}
  .hx-work__head{padding-top:64px}
  .hx-work__head h2{letter-spacing:.14em}
  .hx-pair,.hx-split,.hx-trio{flex-direction:column;grid-template-columns:1fr;gap:20px}
  .hx-pair .hx-zoom img,
  .hx-split .hx-zoom img,
  .hx-trio .hx-zoom img,
  .hx-stack .hx-zoom img,
  .hx-solo img,
  .hx-sheet .hx-zoom img,
  .hx-plate .hx-frame--land img,
  .hx-plate .hx-frame--sq img,
  .hx-plate .hx-frame--port img{
    max-width:min(100%,92vw);
    max-height:min(70vh,640px);
  }
  .hx-sheet{padding:28px var(--side) 40px}
  .hx-sheet + .hx-sheet{padding-top:4px}
  .hx-kind{margin-bottom:16px}
  .hx-gallery{grid-template-columns:1fr;gap:56px;padding:24px 0 32px}
  .hx-gallery .hx-plate:last-child:nth-child(odd) .hx-frame{width:100%}
  .hx-gallery .hx-plate + .hx-plate::before{
    content:""; position:absolute; z-index:1; top:-28px; left:0;
    width:100%; height:1px; transform:none;
    background:var(--gold); pointer-events:none;
  }
  .hx-quiet__ports{grid-template-columns:1fr;gap:56px}
  .hx-quiet__ports .hx-plate + .hx-plate::before{
    content:""; position:absolute; z-index:1; top:-28px; left:0;
    width:100%; height:1px; transform:none;
    background:var(--gold); pointer-events:none;
  }
  .hx-close{padding:48px var(--side) 40px}
  .hx-colophon{padding:72px var(--side) 4px}
  .hx-colophon p{font-size:17px;line-height:2.05;letter-spacing:.06em}
  .hx-colophon span:last-child{letter-spacing:.16em}
  .hx-close img{width:min(78vw,240px)}
  .hx-close p{font-size:15px;gap:12px;letter-spacing:.42em;padding-left:.42em}
  .hx-close p i{width:28px}
}