/* ===========================================================
   BOLJURGEN — 作品集
   =========================================================== */

:root{
  --paper:#f6f4ef;
  --paper-2:#efeadf;
  --ink:#17150f;
  --ink-soft:#3a3529;
  --muted:#8a8271;
  --line:#ded7c6;
  --accent:#96663a;
  --serif: ui-serif, Georgia, "Songti SC", "SimSun", "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
  --pad: clamp(20px, 5vw, 72px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.72;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--ink); color:var(--paper); }

.wrap{ width:100%; max-width:1320px; margin:0 auto; padding:0 var(--pad); }

.eyebrow{
  margin:0 0 18px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------------- Header ---------------- */
.site-head{
  position:fixed; inset:0 0 auto 0; z-index:80;
  transition:background .4s var(--ease), box-shadow .4s var(--ease);
}
.site-head.is-stuck{
  background:rgba(246,244,239,.86);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  box-shadow:0 1px 0 var(--line);
}
.head-inner{ display:flex; align-items:center; justify-content:space-between; height:74px; }

.wordmark{
  font-family:var(--serif);
  font-size:15px;
  letter-spacing:.34em;
  text-transform:uppercase;
}

.nav{ display:flex; gap:clamp(18px,3vw,40px); }
.nav a{
  position:relative;
  font-size:13px;
  letter-spacing:.12em;
  color:var(--ink-soft);
  padding:6px 0;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:0; height:1px; background:var(--ink);
  transition:width .35s var(--ease);
}
.nav a:hover::after{ width:100%; }

/* ---------------- Hero ---------------- */
.hero{ position:relative; padding-top:74px; }

.hero-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
  gap:clamp(24px,4vw,64px);
  align-items:center;
  min-height:min(88vh, 860px);
  padding-top:clamp(24px,5vh,72px);
  padding-bottom:clamp(24px,4vh,56px);
}

.hero-title{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(52px, 9.4vw, 132px);
  line-height:.92;
  letter-spacing:-.015em;
}

.hero-sub{
  margin:clamp(20px,3vh,34px) 0 0;
  max-width:34ch;
  font-size:clamp(14px,1.1vw,16.5px);
  line-height:1.95;
  color:var(--ink-soft);
}

.hero-meta{
  display:flex; flex-wrap:wrap; gap:10px 26px;
  margin-top:clamp(24px,3.6vh,40px);
  padding-top:22px;
  border-top:1px solid var(--line);
  font-size:13px;
  color:var(--muted);
}
.hero-name{ color:var(--ink); }
.hero-name em{ font-style:normal; font-size:12px; color:var(--muted); margin-left:6px; }
.hero-loc{ letter-spacing:.08em; }

.hero-cta{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:clamp(24px,3.6vh,38px);
  padding-bottom:6px;
  font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  border-bottom:1px solid var(--ink);
}
.hero-cta svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.4; transition:transform .4s var(--ease); }
.hero-cta:hover svg{ transform:translateY(4px); }

/* 首屏竖向滚动图墙 */
.hero-visual{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  height:min(74vh, 720px);
  overflow:hidden;
  mask-image:linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
}
.strip{ display:flex; flex-direction:column; gap:14px; will-change:transform; }
.strip-a{ animation:slide-up 46s linear infinite; }
.strip-b{ animation:slide-up 62s linear infinite reverse; margin-top:-90px; }
.strip img{ width:100%; height:auto; filter:saturate(.97); }
@keyframes slide-up{
  from{ transform:translateY(0); }
  to{ transform:translateY(-50%); }
}

/* 首屏底部滚动字条 */
.scroller{
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:13px 0;
}
.scroller-track{
  display:flex; align-items:center; gap:22px;
  width:max-content;
  animation:marquee 42s linear infinite;
  font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}
.scroller-track i{ font-style:normal; color:var(--line); }
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------------- Works ---------------- */
.works{ padding:clamp(72px,11vh,132px) 0 clamp(60px,8vh,96px); }

.sec-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; padding-bottom:26px; border-bottom:1px solid var(--line);
}
.sec-title{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(30px,4vw,50px);
  line-height:1.06;
  letter-spacing:-.01em;
}
.sec-note{ margin:0 0 6px; font-size:12.5px; letter-spacing:.1em; color:var(--muted); }

.filters{
  display:flex; flex-wrap:wrap; gap:8px;
  padding:26px 0 34px;
}
.chip{
  padding:8px 17px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:12.5px; letter-spacing:.06em;
  color:var(--ink-soft);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.chip small{ margin-left:6px; font-size:11px; color:var(--muted); }
.chip:hover{ border-color:var(--ink); }
.chip.is-on{
  background:var(--ink); border-color:var(--ink); color:var(--paper);
}
.chip.is-on small{ color:rgba(246,244,239,.6); }

.grid{
  columns:3;
  column-gap:clamp(16px,2vw,28px);
}
.card{
  break-inside:avoid;
  margin:0 0 clamp(20px,2.6vw,34px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
/* 仅在 JS 正常运行时才隐藏等待出场，避免脚本异常导致整页空白 */
.js .card{ opacity:0; transform:translateY(14px); }
.js .card.is-in{ opacity:1; transform:none; }
.card.is-hidden{ display:none; }

.card-media{
  position:relative; display:block; width:100%; overflow:hidden;
  background:var(--paper-2);
  border-radius:2px;
}
.card-media img{
  width:100%; height:auto;
  transition:transform .8s var(--ease), filter .6s var(--ease);
}
.card-media::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:var(--ink); opacity:0;
  pointer-events:none;
  transition:opacity .5s var(--ease);
}
.card:hover .card-media img{ transform:scale(1.035); }
.card:hover .card-media::after{ opacity:.05; }

.card-badge{
  position:absolute; right:10px; bottom:10px; z-index:2;
  padding:3px 9px;
  background:rgba(23,21,15,.74);
  color:#fff;
  font-size:10.5px; letter-spacing:.08em;
  border-radius:999px;
  opacity:0; transform:translateY(6px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.card:hover .card-badge{ opacity:1; transform:none; }

.card-meta{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; margin-top:12px;
}
.card-meta h3{
  margin:0;
  font-size:14.5px; font-weight:600; letter-spacing:.01em;
}
.card-meta p{
  margin:2px 0 0;
  font-size:12px; color:var(--muted); letter-spacing:.04em;
}
.card-cat{
  flex:none;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
}

/* ---------------- About ---------------- */
.about{
  padding:clamp(72px,11vh,132px) 0;
  border-top:1px solid var(--line);
}
.about-inner{
  display:grid;
  grid-template-columns:minmax(0,.3fr) minmax(0,1fr);
  gap:clamp(24px,5vw,80px);
}
.about-side{ position:sticky; top:110px; align-self:start; }
.about-main{ max-width:70ch; }

/* 关于区肖像：黑白照落在纸白底上，只加一道细边 */
.portrait{ margin:clamp(22px,3.4vh,36px) 0 0; max-width:300px; }
.portrait img{
  display:block; width:100%; height:auto;
  border:1px solid var(--line);
}

.lead{
  margin:0 0 22px;
  font-size:clamp(15px,1.25vw,17.5px);
  line-height:2;
  color:var(--ink-soft);
}
.lead strong{ color:var(--ink); font-weight:600; }

.timeline,.cap{ margin-top:clamp(38px,5vh,60px); }
.tl-title{
  margin:0 0 20px;
  font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted);
}
.tl{ list-style:none; margin:0; padding:0; }
.tl li{
  display:grid;
  grid-template-columns:clamp(96px,12vw,132px) 1fr;
  gap:18px;
  padding:15px 0;
  border-top:1px solid var(--line);
  font-size:14px;
  color:var(--ink-soft);
}
.tl li:last-child{ border-bottom:1px solid var(--line); }
.tl .yr{ font-family:var(--serif); font-size:13.5px; color:var(--muted); letter-spacing:.02em; }
.tl .what b{ color:var(--ink); font-weight:600; }

.cap-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 26px;
}
.cap-list li{
  padding:11px 0;
  border-top:1px solid var(--line);
  font-size:14px; color:var(--ink-soft);
}

/* ---------------- Contact ---------------- */
.contact{
  padding:clamp(72px,11vh,132px) 0 clamp(64px,9vh,110px);
  border-top:1px solid var(--line);
}
.contact-title{
  margin:0 0 clamp(20px,3vh,32px);
  font-family:var(--serif); font-weight:400;
  font-size:clamp(30px,4.6vw,58px);
  line-height:1.05;
}
.mail{
  display:inline-block;
  font-family:var(--serif);
  font-size:clamp(20px,3.2vw,40px);
  line-height:1.2;
  border-bottom:1px solid var(--line);
  padding-bottom:6px;
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
.mail:hover{ border-color:var(--ink); color:var(--accent); }

.contact-rows{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px; margin-top:clamp(40px,6vh,72px);
}
.contact-rows div{ padding-top:16px; border-top:1px solid var(--line); }
.contact-rows span{
  display:block; margin-bottom:6px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.contact-rows a,.contact-rows p{ margin:0; font-size:15px; }
.contact-rows a:hover{ color:var(--accent); }

/* 联系方式 + 微信二维码：左侧文字，右侧码 */
.contact-bottom{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(24px,4vw,56px);
  margin-top:clamp(40px,6vh,72px);
}
.contact-bottom .contact-rows{
  flex:1 1 auto; min-width:0;
  grid-template-columns:1fr; margin-top:0;
}
.qr-card{ flex:none; text-align:center; }
.qr-frame{
  display:inline-block; padding:9px;
  background:#fff; border:1px solid var(--line);
}
.qr-frame img{ display:block; width:clamp(104px,12vw,132px); height:auto; }
.qr-card span{
  display:block; margin-top:10px;
  font-size:11px; letter-spacing:.16em; color:var(--muted);
}

/* ---------------- Footer ---------------- */
.site-foot{ border-top:1px solid var(--line); }
.foot-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px 24px; flex-wrap:wrap;
  padding-top:24px; padding-bottom:24px;
  font-size:12.5px; letter-spacing:.06em; color:var(--muted);
}
.foot-brand{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.foot-copy{ color:var(--ink-soft); }
.foot-sep{ color:var(--line); }

.foot-beian{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
/* 每个备案条目都不可压缩，放不下时整条换行，绝不把「警徽」和编号拆开 */
.foot-beian > *{ flex:0 0 auto; }
.foot-beian a{
  color:var(--muted);
  border-bottom:1px solid transparent;
  padding-bottom:1px;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.foot-beian a:hover{ color:var(--ink); border-bottom-color:var(--line); }
.foot-police{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.foot-police img{
  width:15px; height:16px; display:block;
  opacity:.85; transition:opacity .3s var(--ease);
}
.foot-police:hover img{ opacity:1; }
/* 窄屏：页脚上下堆叠后，备案号靠字号自适应压进同一行 */
@media (max-width:760px){
  .foot-beian{
    gap:5px;
    font-size:clamp(9.5px,2.7vw,11.5px);
    letter-spacing:0;
  }
  .foot-beian .foot-sep{ margin:0 1px; }
  .foot-police{ gap:4px; }
  .foot-police img{ width:13px; height:14px; }
}
.foot-todo{ font-size:11.5px; color:#b08a5e; }

/* ---------------- Lightbox ---------------- */
.lb{
  position:fixed; inset:0; z-index:120;
  display:flex; flex-direction:column;
  background:#100f0d;
  color:#f2efe8;
  opacity:0; visibility:hidden;
  transition:opacity .4s var(--ease), visibility .4s;
}
.lb.is-open{ opacity:1; visibility:visible; }

.lb-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(16px,3vw,34px);
  flex:none;
}
.lb-counter{ font-size:12px; letter-spacing:.18em; color:rgba(242,239,232,.55); }
.lb-close{
  width:38px; height:38px; display:grid; place-items:center;
  border:1px solid rgba(242,239,232,.18); border-radius:50%;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.lb-close:hover{ border-color:rgba(242,239,232,.6); background:rgba(242,239,232,.06); }
.lb-close svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; }

.lb-stage{
  flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(4px,2vw,26px);
  padding:0 clamp(8px,2vw,26px);
  position:relative;
}
.lb-img{
  max-width:100%; max-height:100%;
  object-fit:contain;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  opacity:0;
  transition:opacity .35s var(--ease);
}
.lb-img.is-ready{ opacity:1; }

.lb-nav{
  flex:none;
  width:clamp(36px,4vw,48px); height:clamp(36px,4vw,48px);
  display:grid; place-items:center;
  border:1px solid rgba(242,239,232,.18); border-radius:50%;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.lb-nav:hover{ border-color:rgba(242,239,232,.6); background:rgba(242,239,232,.06); }
.lb-nav svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.4; }
.lb-nav[disabled]{ opacity:.25; pointer-events:none; }

.lb-info{
  flex:none;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px;
  padding:clamp(14px,2.4vh,26px) clamp(16px,3vw,34px) clamp(18px,3vh,32px);
  border-top:1px solid rgba(242,239,232,.1);
}
.lb-text{ min-width:0; }
.lb-text h3{
  margin:0 0 4px;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(18px,2vw,26px);
}
.lb-sub{ margin:0 0 8px; font-size:12px; letter-spacing:.14em; color:rgba(242,239,232,.55); }
.lb-desc{
  margin:0; max-width:62ch;
  font-size:13px; line-height:1.85; color:rgba(242,239,232,.72);
}

.lb-thumbs{ display:flex; gap:8px; flex:none; }
.lb-thumbs button{
  width:52px; height:52px; overflow:hidden; border-radius:2px;
  border:1px solid transparent; opacity:.5;
  transition:opacity .3s var(--ease), border-color .3s var(--ease);
}
.lb-thumbs button img{ width:100%; height:100%; object-fit:cover; }
.lb-thumbs button:hover{ opacity:.85; }
.lb-thumbs button.is-on{ opacity:1; border-color:rgba(242,239,232,.75); }

/* ---------------- Responsive ---------------- */
@media (max-width:1080px){
  .grid{ columns:2; }
  .hero-inner{ grid-template-columns:minmax(0,1fr) minmax(0,.5fr); }
  .about-inner{ grid-template-columns:1fr; }
  .about-side{ position:static; }
}

@media (max-width:760px){
  .head-inner{ height:62px; }
  .hero{ padding-top:62px; }
  .hero-inner{ grid-template-columns:1fr; min-height:0; padding-top:36px; padding-bottom:34px; }
  .hero-visual{ display:none; }
  .hero-title{ font-size:clamp(44px,13vw,72px); }
  .grid{ columns:1; }
  .sec-head{ flex-direction:column; align-items:flex-start; gap:10px; }
  .contact-rows{ grid-template-columns:1fr; gap:18px; }
  .contact-bottom{ flex-direction:column; align-items:flex-start; gap:30px; }
  .cap-list{ grid-template-columns:1fr; }
  .foot-inner{ flex-direction:column; align-items:flex-start; gap:10px; }
  .lb-info{ flex-direction:column; align-items:flex-start; gap:14px; }
  .lb-desc{ display:none; }
  .lb-thumbs button{ width:44px; height:44px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .strip-a,.strip-b,.scroller-track{ animation:none; }
  .js .card{ opacity:1; transform:none; transition:none; }
  .card-media img{ transition:none; }
}