/* ==========================================================
   王帅磊 Leon Wang · 室内设计师作品集
   现代极简 · 大地色调
   ========================================================== */
:root{
  --bg:        #f6f3ee;   /* 米白 */
  --bg-deep:   #efeae1;
  --ink:       #2c2a26;   /* 深灰墨 */
  --ink-soft:  #6b665c;
  --accent:    #b0713f;   /* 陶土橙 */
  --accent-deep:#8f5a2f;
  --line:      rgba(44,42,38,.12);
  --card:      #ffffff;
  --serif: "Noto Serif SC","Songti SC","STSong","SimSun",serif;
  --sans:  "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  --shadow: 0 20px 60px rgba(44,42,38,.12);
  --ease: cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.75;font-size:15px;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 28px}

/* ---------- 导航 ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .35s,box-shadow .35s}
.nav.scrolled{background:rgba(246,243,238,.92);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
.nav-inner{max-width:1200px;margin:0 auto;padding:18px 28px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{font-family:var(--serif);font-size:18px;letter-spacing:2px;font-weight:700}
.nav-logo span{color:var(--accent);font-weight:400;font-size:15px;margin-left:6px}
.nav-right{display:flex;align-items:center;gap:14px}
.nav-links{display:flex;gap:36px}
.nav-links a{font-size:14px;letter-spacing:2px;color:var(--ink-soft);transition:color .25s;position:relative}
.lang-btn{background:transparent;border:1px solid var(--line);color:var(--ink-soft);font-size:12px;letter-spacing:2px;padding:7px 16px;cursor:pointer;transition:all .3s;font-family:var(--sans);line-height:1.4}
.lang-btn:hover{border-color:var(--accent);color:var(--accent)}
/* hero 上导航反白 */
.nav:not(.scrolled) .nav-links a,.nav:not(.scrolled) .lang-btn{color:rgba(255,255,255,.88)}
.nav:not(.scrolled) .lang-btn{border-color:rgba(255,255,255,.45)}
.nav:not(.scrolled) .nav-links a:hover,.nav:not(.scrolled) .lang-btn:hover{color:#fff;border-color:#fff}
.nav:not(.scrolled) .nav-logo{color:#fff}
.nav:not(.scrolled) .nav-burger span{background:#fff}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background:var(--accent);transition:width .3s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{width:100%}
.nav-burger{display:none;background:none;border:none;cursor:pointer;padding:6px}
.nav-burger span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;transition:.3s}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.05);animation:heroZoom 8s var(--ease) forwards}
@keyframes heroZoom{to{transform:scale(1)}}
.hero-mask{position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,28,24,.45) 0%,rgba(30,28,24,.25) 40%,rgba(30,28,24,.65) 100%)}
.hero-content{position:relative;z-index:2;padding:0 28px;max-width:1200px;margin:0 auto;width:100%;color:#fff}
.hero-kicker{letter-spacing:5px;font-size:12px;opacity:.85;margin-bottom:18px}
.hero-title{font-family:var(--serif);font-size:clamp(52px,9vw,96px);font-weight:700;line-height:1.1;letter-spacing:6px}
.hero-en{font-weight:300;font-size:.55em;letter-spacing:3px;margin-left:10px;opacity:.9}
.hero-sub{font-size:clamp(15px,2vw,19px);opacity:.92;margin-top:22px;line-height:1.9;letter-spacing:1px}
.hero-cta{margin-top:40px;display:flex;gap:16px;flex-wrap:wrap}
.btn{display:inline-block;padding:14px 38px;font-size:14px;letter-spacing:3px;border:1px solid transparent;cursor:pointer;transition:all .3s var(--ease)}
.btn-solid{background:#fff;color:var(--ink);border-color:#fff}
.btn-solid:hover{background:transparent;color:#fff}
.btn-ghost{border-color:rgba(255,255,255,.6);color:#fff}
.btn-ghost:hover{background:#fff;color:var(--ink)}
.hero-scroll{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);color:#fff;font-size:11px;letter-spacing:4px;opacity:.7;animation:bob 2.2s infinite;z-index:2}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ---------- 通用 Section ---------- */
.section{padding:110px 0}
.section-works{background:var(--bg-deep)}
.sec-kicker{font-size:12px;letter-spacing:6px;color:var(--accent);margin-bottom:12px}
.sec-title{font-family:var(--serif);font-size:clamp(30px,4vw,44px);font-weight:700;letter-spacing:3px;margin-bottom:20px}
.section .sec-title::after{content:"";display:block;width:52px;height:2px;background:var(--accent);margin-top:18px}

/* ---------- 关于 ---------- */
.about-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;margin:52px 0 20px}
.lead{font-size:19px;font-family:var(--serif);line-height:1.9;color:var(--ink)}
.about-text p{color:var(--ink-soft);margin-top:18px}
.about-text blockquote{border-left:3px solid var(--accent);padding:6px 0 6px 22px;margin-top:28px;font-family:var(--serif);font-size:16px;color:var(--ink);font-style:italic}
.about-facts{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-content:start}
.fact{background:var(--card);padding:26px 22px;box-shadow:0 8px 30px rgba(44,42,38,.06);border:1px solid var(--line)}
.fact-num{font-family:var(--serif);font-size:42px;font-weight:700;color:var(--accent);line-height:1}
.fact-num span{font-size:18px;font-weight:400;margin-left:3px}
.fact-label{font-size:13px;color:var(--ink-soft);margin-top:10px;letter-spacing:1px}

/* 时间线 */
.timeline{margin:70px 0 0;position:relative;padding-left:0}
.tl-item{display:grid;grid-template-columns:170px 1fr;gap:24px;padding:26px 0;border-top:1px solid var(--line)}
.tl-item:last-child{border-bottom:1px solid var(--line)}
.tl-year{font-family:var(--serif);font-size:15px;letter-spacing:2px;color:var(--accent);padding-top:2px}
.tl-body h4{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:1px}
.tl-body p{color:var(--ink-soft);font-size:14px;margin-top:4px}

/* 工作方式 */
.method{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:70px}
.method-item{background:var(--card);padding:34px 30px;border:1px solid var(--line);transition:transform .35s var(--ease),box-shadow .35s}
.method-item:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.method-icon{font-family:var(--serif);font-size:26px;color:var(--accent);letter-spacing:2px}
.method-item h4{font-family:var(--serif);font-size:18px;margin:14px 0 8px}
.method-item p{color:var(--ink-soft);font-size:14px}

/* ---------- 作品 ---------- */
.filter{display:flex;gap:12px;flex-wrap:wrap;margin:40px 0 44px}
.f-btn{padding:9px 26px;border:1px solid var(--line);background:transparent;color:var(--ink-soft);font-size:13px;letter-spacing:2px;cursor:pointer;transition:all .3s;font-family:var(--sans)}
.f-btn:hover{border-color:var(--ink);color:var(--ink)}
.f-btn.active{background:var(--ink);border-color:var(--ink);color:#fff}
.works-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.work-card{position:relative;overflow:hidden;cursor:pointer;background:var(--card);box-shadow:0 6px 24px rgba(44,42,38,.07)}
.work-media{position:relative;aspect-ratio:4/3;overflow:hidden}
.work-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.work-card:hover .work-media img{transform:scale(1.06)}
.work-tag{position:absolute;top:14px;left:14px;background:rgba(44,42,38,.78);color:#fff;font-size:11px;letter-spacing:2px;padding:5px 14px;z-index:2}
.work-tag.placeholder-tag{background:var(--accent)}
.work-body{padding:20px 22px 22px;display:flex;justify-content:space-between;align-items:flex-end}
.work-body h3{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:1px}
.work-body .w-sub{font-size:12px;color:var(--ink-soft);letter-spacing:2px;margin-top:4px}
.work-arrow{font-size:18px;color:var(--accent);opacity:0;transform:translateX(-8px);transition:all .35s var(--ease)}
.work-card:hover .work-arrow{opacity:1;transform:translateX(0)}

/* 占位卡片（待补图） */
.work-card.placeholder .work-media{background:linear-gradient(135deg,#e8e2d6,#d9d0bf);display:flex;align-items:center;justify-content:center}
.work-card.placeholder .ph-text{font-family:var(--serif);color:var(--accent-deep);letter-spacing:4px;font-size:14px;text-align:center;padding:0 20px}

/* ---------- 服务 ---------- */
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px}
.svc-card{background:var(--card);padding:40px 34px;border:1px solid var(--line);transition:transform .35s var(--ease),box-shadow .35s}
.svc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.svc-card h3{font-family:var(--serif);font-size:21px;letter-spacing:2px;margin-bottom:14px;position:relative;padding-bottom:14px}
.svc-card h3::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:2px;background:var(--accent)}
.svc-card p{color:var(--ink-soft);font-size:14px}
.svc-card ul{list-style:none;margin-top:18px}
.svc-card li{font-size:13px;color:var(--ink-soft);padding:6px 0;border-top:1px dashed var(--line);letter-spacing:1px}
.svc-card li::before{content:"·";color:var(--accent);margin-right:8px;font-weight:700}

/* ---------- 联系 ---------- */
.section-contact{background:var(--ink);color:#f3efe8}
.section-contact .sec-title::after{background:var(--accent)}
.section-contact .sec-kicker{color:#d8a97a}
.contact-sub{color:rgba(243,239,232,.75);margin-bottom:52px;letter-spacing:1px}
.contact-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.contact-card{border:1px solid rgba(243,239,232,.16);padding:34px 30px;transition:border-color .3s,background .3s}
a.contact-card:hover{border-color:var(--accent);background:rgba(176,113,63,.08)}
.cc-label{font-size:11px;letter-spacing:4px;color:#d8a97a;margin-bottom:12px}
.cc-value{font-family:var(--serif);font-size:18px;letter-spacing:1px}

/* ---------- 页脚 ---------- */
.footer{padding:34px 0;background:var(--ink);border-top:1px solid rgba(243,239,232,.08)}
.footer p{color:rgba(243,239,232,.45);font-size:12px;letter-spacing:2px;text-align:center}

/* ---------- 作品详情页（独立视图：桌面左文右图 / 移动顶部固定） ---------- */
.work-view{position:fixed;inset:0;z-index:150;background:var(--bg);display:flex;visibility:hidden;opacity:0;transition:opacity .35s,visibility .35s}
.work-view.open{visibility:visible;opacity:1}
/* 左侧信息栏：固定不随滚动 */
.wv-top{flex-shrink:0;width:340px;height:100vh;overflow-y:auto;padding:30px 30px 90px;background:var(--bg);border-right:1px solid rgba(43,43,43,.08)}
.wv-back{display:inline-flex;align-items:center;gap:8px;background:none;border:none;color:var(--ink);font-size:13px;letter-spacing:2px;cursor:pointer;padding:6px 0;margin-bottom:26px;opacity:.7;transition:opacity .3s}
.wv-back:hover{opacity:1}
.wv-tags{font-size:11px;letter-spacing:3px;color:var(--accent);margin-bottom:10px}
.wv-head h2{font-family:var(--serif);font-size:26px;letter-spacing:1.5px;margin-bottom:14px;line-height:1.4}
.wv-desc{color:var(--ink-soft);font-size:14px;line-height:2}
.wv-desc .d-points{margin-top:14px}
.wv-desc .d-points li{margin-left:18px;margin-bottom:5px}
/* 右侧图片流：独立滚动 */
.wv-flow{flex:1;min-width:0;height:100vh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:26px 26px 90px}
.wv-flow-inner{max-width:1100px;margin:0 auto}
.wv-flow img{display:block;width:100%;height:auto;margin:0 auto 22px;border-radius:3px;background:#EFEBE4;cursor:zoom-in;box-shadow:0 10px 40px rgba(0,0,0,.08)}
/* 底部导航 */
.wv-footer{position:fixed;bottom:0;left:340px;right:0;z-index:10;display:flex;justify-content:space-between;padding:14px 28px;background:rgba(250,248,244,.92);backdrop-filter:blur(10px);border-top:1px solid rgba(43,43,43,.08)}
.wv-footer .btn{min-width:92px;font-size:13px}
/* ---------- 全屏看图 ---------- */
.lb{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:24px;visibility:hidden;opacity:0;transition:opacity .3s,visibility .3s}
.lb.open{visibility:visible;opacity:1}
.lb-backdrop{position:absolute;inset:0;background:rgba(8,7,6,.95)}
.lb-img{position:relative;z-index:2;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:2px}
.lb-close{position:absolute;top:16px;right:16px;z-index:5;width:44px;height:44px;border-radius:50%;border:none;background:rgba(255,255,255,.12);color:#fff;font-size:16px;cursor:pointer;transition:background .3s}
.lb-close:hover{background:var(--accent)}
.lb-count{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.55);font-size:12px;letter-spacing:3px;z-index:5}

/* ---------- 滚动渐显 ---------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- 响应式 ---------- */
@media (max-width:960px){
  .about-grid{grid-template-columns:1fr;gap:40px}
  .works-grid{grid-template-columns:repeat(2,1fr)}
  .service-grid{grid-template-columns:1fr;max-width:560px}
  .method{grid-template-columns:1fr}
  .contact-row{grid-template-columns:1fr}
  .tl-item{grid-template-columns:120px 1fr}
  /* 详情页：窄屏退回上下布局，顶部信息固定 */
  .work-view{flex-direction:column}
  .wv-top{width:100%;height:auto;max-height:42vh;overflow-y:auto;padding:16px 18px 14px;border-right:none;border-bottom:1px solid rgba(43,43,43,.08)}
  .wv-back{margin-bottom:12px}
  .wv-head h2{font-size:20px;margin-bottom:8px}
  .wv-flow{height:auto;flex:1;padding:16px 12px 90px}
  .wv-footer{left:0}
}
@media (max-width:640px){
  .section{padding:80px 0}
  .nav-links{position:fixed;top:0;right:0;height:100vh;width:min(280px,75vw);background:var(--bg);flex-direction:column;justify-content:center;align-items:center;gap:30px;transform:translateX(100%);transition:transform .4s var(--ease);box-shadow:-20px 0 60px rgba(0,0,0,.15);z-index:105}
  .nav:not(.scrolled) .nav-links a{color:var(--ink-soft)}
  .nav:not(.scrolled) .nav-links a:hover{color:var(--ink)}
  .nav:not(.scrolled) .nav-logo{color:var(--ink)}
  .nav:not(.scrolled) .nav-burger span{background:var(--ink)}
  .lang-btn{font-size:11px;padding:6px 12px}
  .nav-links.open{transform:none}
  .nav-burger{display:block;position:relative;z-index:110}
  .works-grid{grid-template-columns:1fr}
  .wv-footer{padding:12px 16px}
  .wv-footer .btn{min-width:76px}
  .lb{padding:12px}
  .g-arrow{width:38px;height:38px;font-size:16px}
  .g-arrow.prev{left:6px}
  .g-arrow.next{right:6px}
}