/* =========================================================
   袁刘凯 · 新媒体运营作品集
   ========================================================= */

:root{
  --ink:#111111;
  --bg:#ffffff;
  --accent:#FFE600;
  --muted:#6E6E6E;
  --muted-2:#8A8A8A;
  --muted-3:#9A9A9A;
  --chip:#F4F4F4;
  --line:rgba(17,17,17,.12);
  --pad:64px;
  --font-sans:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",
              system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",
                 "Helvetica Neue",Arial,sans-serif;
}

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

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,p,dl,dd,figure,blockquote{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

.wrap{padding-left:var(--pad);padding-right:var(--pad)}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:999px;
  padding:16px 30px;
  font-size:15px;font-weight:600;line-height:1;
  white-space:nowrap;
  transition:transform .18s ease,background-color .18s ease,color .18s ease,
             border-color .18s ease,box-shadow .18s ease;
}
.btn--yellow{background:var(--accent);color:var(--ink)}
.btn--yellow:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(255,230,0,.35)}
.btn--ghost{border:1px solid rgba(255,255,255,.28);color:#fff}
.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn--dark{background:var(--ink);color:var(--accent);padding:18px 38px}
.btn--dark:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.22)}
.btn--sm{padding:11px 24px;font-size:12px;letter-spacing:1px}

/* =========================================================
   导航
   ========================================================= */
.nav{
  position:sticky;top:0;z-index:60;
  background:var(--ink);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.nav__inner{
  max-width:1440px;margin:0 auto;
  height:76px;
  padding:0 var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.logo{display:flex;align-items:center;gap:10px}
.logo__mark{width:9px;height:9px;background:var(--accent);flex:none}
.logo__mark--sm{display:inline-block;width:9px;height:9px}
.logo__name{color:#fff;font-size:18px;font-weight:700;letter-spacing:1px}

.nav__links{display:flex;align-items:center;gap:40px}
.nav__links a{
  color:var(--muted-3);font-size:12px;letter-spacing:2px;
  transition:color .18s ease;
}
.nav__links a:hover{color:#fff}

/* =========================================================
   首屏
   ========================================================= */
.hero{background:var(--ink)}
.hero__inner{
  max-width:1440px;margin:0 auto;
  padding:88px var(--pad);
  display:grid;
  grid-template-columns:minmax(0,1fr) 520px;
  gap:64px;
  align-items:center;
}
.hero__col{
  display:flex;flex-direction:column;align-items:flex-start;gap:22px;
  min-width:0;
}
.dots{width:132px;height:44px;opacity:.9}
.dots svg{width:100%;height:100%;display:block}

.hero__title{
  color:#fff;
  font-size:clamp(42px,5.1vw,68px);
  line-height:1.176;
  font-weight:900;
  letter-spacing:2px;
}
.badge{
  background:var(--accent);color:var(--ink);
  padding:12px 20px;
  font-size:14px;font-weight:700;letter-spacing:1.5px;line-height:1;
}
.hero__sub{
  color:var(--muted-3);
  font-size:16px;line-height:1.875;
  max-width:640px;
}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap}

.stats{
  display:flex;gap:56px;flex-wrap:wrap;
  padding-top:14px;width:100%;
}
.stats__item dt{
  font-family:var(--font-display);
  font-size:40px;line-height:1.1;font-weight:900;color:#fff;
}
.stats__item dt.is-accent{color:var(--accent)}
.stats__item dd{margin-top:6px;font-size:12px;color:var(--muted-3)}

/* 首屏右侧作品组：严格按画布比例 300:204 / 265:113 */
.hero__stack{
  display:grid;
  grid-template-columns:300fr 204fr;
  gap:16px;
  align-items:stretch;
}
.hero__stack figure{margin:0;overflow:hidden;background:#1A1A1A}
.hero__a{grid-row:span 2}
.hero__a img,.hero__b img,.hero__c img{width:100%;height:100%;object-fit:cover}
.hero__b,.hero__c{aspect-ratio:204/265}
.hero__c{aspect-ratio:204/113}

/* =========================================================
   客户品牌带
   ========================================================= */
.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band__inner{
  max-width:1440px;margin:0 auto;
  padding:32px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  flex-wrap:wrap;
}
.band__item{display:flex;flex-direction:column;gap:5px}
.band__name{font-size:16px;font-weight:700;letter-spacing:2px;color:var(--ink)}
.band__cat{font-size:11px;letter-spacing:1px;color:var(--muted-3)}

/* =========================================================
   区块标题（居中 + 黄圈星标）
   ========================================================= */
.sec-head{
  max-width:1440px;margin:0 auto;
  padding:120px var(--pad) 44px;
  display:flex;flex-direction:column;align-items:center;gap:18px;
  text-align:center;
}
.sec-head__title{display:flex;align-items:center;gap:16px}
.sec-head__title h2{
  font-size:clamp(30px,3.4vw,46px);
  line-height:1.22;font-weight:900;letter-spacing:.5px;color:var(--ink);
}
.star{width:34px;height:34px;flex:none}
.star svg{width:100%;height:100%;display:block}
.sec-head__eyebrow{
  font-size:12px;letter-spacing:3px;color:var(--muted-3);
  text-transform:uppercase;
}
.sec-head__eyebrow--left{text-align:left}
.sec-head__desc{
  max-width:780px;
  font-size:16px;line-height:1.75;color:var(--muted-2);
}

/* =========================================================
   精选项目
   ========================================================= */
.cases{
  max-width:1440px;margin:0 auto;
  padding:0 var(--pad);
  display:flex;flex-direction:column;gap:80px;
}
.case{
  display:grid;
  grid-template-columns:340px minmax(0,1fr);
  gap:44px;
  align-items:start;
}
.case--flip{grid-template-columns:minmax(0,1fr) 340px}
.case--flip .case__media{order:-1}

.case__text{display:flex;flex-direction:column;gap:16px;min-width:0}
.case__idx{
  font-family:var(--font-display);
  font-size:46px;line-height:1;font-weight:900;color:var(--accent);
}
.case__name{font-size:26px;line-height:1.3;font-weight:800;color:var(--ink)}
.case__desc{font-size:15px;line-height:1.8;color:var(--muted)}
.case__out{font-size:12px;line-height:1.7;color:#A0A0A0}

.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  background:var(--chip);color:var(--muted);
  padding:6px 12px;font-size:12px;line-height:1.4;white-space:nowrap;
}
.chip--accent{background:var(--accent);color:var(--ink);font-weight:600}

.case__media{
  display:grid;
  grid-template-columns:minmax(0,1fr) 200px;
  gap:16px;
  height:360px;
  min-width:0;
}
.case--flip .case__media{grid-template-columns:200px minmax(0,1fr)}
.case__media figure{margin:0;overflow:hidden;background:#F4F4F4}
.case__big--fit img{object-fit:contain;background:#fff}
.case__big--fit{background:#fff}

/* =========================================================
   作品墙
   ========================================================= */
.filters{
  display:flex;gap:32px;flex-wrap:wrap;justify-content:center;
  padding-top:12px;
}
.filter{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  font-size:12px;letter-spacing:2px;color:var(--muted-3);
  transition:color .18s ease;
}
.filter::after{
  content:"";display:block;width:18px;height:2px;background:transparent;
  transition:background-color .18s ease;
}
.filter:hover{color:var(--ink)}
.filter.is-active{color:var(--ink);font-weight:700}
.filter.is-active::after{background:var(--ink)}

.wall{max-width:1440px;margin:0 auto;padding:0 var(--pad)}
.wall__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.tile{
  position:relative;overflow:hidden;background:#F4F4F4;
  aspect-ratio:1/1;display:block;
}
.tile img{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.tile:hover img{transform:scale(1.05)}
.tile__ov{
  position:absolute;left:0;right:0;bottom:0;
  padding:26px 16px 14px;
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0));
  color:#fff;font-size:12px;letter-spacing:2px;text-align:left;
  opacity:0;transform:translateY(8px);
  transition:opacity .25s ease,transform .25s ease;
}
.tile:hover .tile__ov{opacity:1;transform:translateY(0)}
.tile.is-hidden{display:none}

/* =========================================================
   关于我
   ========================================================= */
.about{
  max-width:1440px;margin:0 auto;
  padding:128px var(--pad);
  display:grid;
  grid-template-columns:460px minmax(0,1fr);
  gap:72px;
  align-items:start;
}

/* 左侧视觉组：按画布 460x560 等比 */
.about__visual{position:relative;aspect-ratio:460/560;width:100%}
.about__card{
  position:absolute;left:0;top:14.2857%;
  width:82.6087%;height:78.5714%;
  background:var(--ink);
  padding:clamp(18px,2.3vw,32px);
  display:flex;flex-direction:column;justify-content:flex-end;gap:14px;
}
.about__rule{width:40px;height:3px;background:var(--accent);border-radius:2px}
.about__motto{color:#F2F2F2;font-size:clamp(16px,1.6vw,22px);line-height:1.55;font-weight:700}
.about__cap{color:#B8B8B8;font-size:12px;letter-spacing:1px}
.about__dots{position:absolute;left:5.2174%;top:18.5714%;width:28.6957%}
.about__dots svg{width:100%;height:auto;display:block}
.about__dot{
  position:absolute;left:76.5217%;top:9.2857%;
  width:5.6522%;aspect-ratio:1/1;border-radius:999px;background:var(--accent);
}
.about__photo{
  position:absolute;left:64.3478%;top:67.1429%;
  width:35.6522%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border:clamp(3px,.45vw,6px) solid #fff;
}

.about__col{display:flex;flex-direction:column;gap:22px;min-width:0}
.about__head{display:flex;flex-direction:column;gap:16px}
.eyebrow{display:flex;align-items:center;gap:12px}
.eyebrow__cn{font-size:12px;font-weight:600;letter-spacing:1px;color:var(--ink)}
.eyebrow__en{font-size:11px;letter-spacing:2px;color:#6E6E6E}
.about__title{
  font-size:clamp(28px,3.1vw,42px);
  line-height:1.38;font-weight:900;color:var(--ink);
}
.zigzag{width:112px;height:12px}
.zigzag svg{width:100%;height:100%;display:block}
.about__p{font-size:16px;line-height:1.875;color:var(--muted)}

.skills{display:flex;flex-wrap:wrap;gap:10px}
.skills span{
  background:var(--chip);color:var(--ink);
  padding:8px 14px;font-size:13px;line-height:1.4;
}
.skills span.is-accent{background:var(--accent);font-weight:600}

.about__tools{font-size:13px;line-height:1.7;color:var(--muted-3)}
.quote{
  background:var(--accent);color:var(--ink);
  padding:22px 24px;
  font-size:19px;line-height:1.7;font-weight:500;
}

/* =========================================================
   工作经历
   ========================================================= */
.exp{
  max-width:1440px;margin:0 auto;
  padding:0 var(--pad) 120px;
  display:flex;flex-direction:column;gap:36px;
}
.exp__head{display:flex;flex-direction:column;gap:18px}
.exp__title{
  font-size:clamp(30px,3.4vw,46px);
  line-height:1.22;font-weight:900;color:var(--ink);
}
.exp__desc{font-size:16px;line-height:1.75;color:var(--muted-2);max-width:820px}

.exp__list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:40px 32px;
}
.exp__item{display:flex;gap:24px;align-items:flex-start}
.exp__year{
  flex:none;width:120px;
  font-family:var(--font-display);
  font-size:13px;font-weight:500;color:var(--muted-3);
  padding-top:2px;
}
.exp__body{display:flex;flex-direction:column;gap:5px;min-width:0}
.exp__body h4{font-size:14px;line-height:1.57;font-weight:600;color:var(--ink)}
.exp__body p{font-size:13px;line-height:1.69;color:var(--muted)}

/* =========================================================
   联系
   ========================================================= */
.cta{
  background:var(--accent);
  padding:120px var(--pad);
  display:flex;flex-direction:column;align-items:center;gap:32px;
  text-align:center;
}
.cta__eyebrow{
  font-size:12px;letter-spacing:3px;font-weight:600;
  color:rgba(17,17,17,.55);
}
.cta__title{
  font-size:clamp(32px,4vw,56px);
  line-height:1.21;font-weight:900;color:var(--ink);
}
.cta__desc{font-size:16px;line-height:1.75;color:rgba(17,17,17,.7)}
.cta__info{display:flex;gap:48px;flex-wrap:wrap;justify-content:center}
.cta__info>div{display:flex;flex-direction:column;gap:5px;align-items:center}
.cta__info span{font-size:11px;color:rgba(17,17,17,.55)}
.cta__info a,.cta__info strong{
  font-size:18px;font-weight:500;color:var(--ink);
  font-family:var(--font-display);
}
.cta__info a:hover{text-decoration:underline;text-underline-offset:4px}

/* =========================================================
   页脚
   ========================================================= */
.foot{
  background:var(--ink);
  padding:72px var(--pad) 36px;
}
.foot> *{max-width:1440px;margin-left:auto;margin-right:auto}
.foot__top{
  display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap;
  padding-bottom:56px;
}
.foot__brand{max-width:400px}
.foot__brand-row{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.foot__name{color:#fff;font-size:18px;font-weight:700}
.foot__brand p{font-size:13px;line-height:1.85;color:#7A7A7A}
.foot__nav{display:flex;gap:64px}
.foot__nav>div{display:flex;flex-direction:column;gap:12px}
.foot__nav h5{font-size:12px;letter-spacing:2px;font-weight:600;color:#7A7A7A}
.foot__nav a,.foot__nav span{font-size:13px;color:var(--muted-3)}
.foot__nav a:hover{color:#fff}
.foot__nav .is-accent{color:var(--accent)}

.foot__big{
  font-family:var(--font-display);
  font-size:clamp(48px,10.4vw,140px);
  line-height:1.07;
  letter-spacing:-4px;
  font-weight:900;
  color:rgba(255,255,255,.07);
  text-align:center;
  white-space:nowrap;
}
.foot__bottom{
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-top:56px;
  font-size:12px;color:#7A7A7A;
}

/* =========================================================
   灯箱
   ========================================================= */
.lightbox{
  position:fixed;inset:0;z-index:100;
  background:rgba(10,10,10,.94);
  display:flex;align-items:center;justify-content:center;
  padding:40px;
  opacity:0;visibility:hidden;
  transition:opacity .25s ease,visibility .25s ease;
}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox figure{
  max-width:min(92vw,860px);max-height:88vh;
  display:flex;flex-direction:column;gap:14px;
}
.lightbox img{
  width:auto;height:auto;max-width:100%;max-height:80vh;
  object-fit:contain;margin:0 auto;
}
.lightbox figcaption{color:var(--muted-3);font-size:13px;letter-spacing:1px;text-align:center}
.lightbox__close{
  position:absolute;top:24px;right:32px;
  width:44px;height:44px;border-radius:999px;
  color:#fff;font-size:26px;line-height:1;
  border:1px solid rgba(255,255,255,.25);
  transition:background-color .18s ease,border-color .18s ease;
}
.lightbox__close:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* =========================================================
   响应式
   ========================================================= */
@media (max-width:1160px){
  .hero__inner{grid-template-columns:minmax(0,1fr) 420px;gap:44px}
  .about{grid-template-columns:380px minmax(0,1fr);gap:48px}
  .case,.case--flip{grid-template-columns:300px minmax(0,1fr)}
  .case--flip{grid-template-columns:minmax(0,1fr) 300px}
}

@media (max-width:980px){
  :root{--pad:40px}
  .nav__links{display:none}
  .hero__inner{grid-template-columns:1fr;gap:48px;padding-top:64px;padding-bottom:72px}
  .hero__stack{max-width:520px}
  .about{grid-template-columns:1fr;gap:40px}
  .about__visual{max-width:460px}
  .case,.case--flip{grid-template-columns:1fr;gap:28px}
  .case--flip .case__media{order:0}
  .exp__list{grid-template-columns:1fr}
  .wall__grid{grid-template-columns:repeat(2,1fr)}
  .sec-head{padding-top:88px}
  .about{padding-top:88px;padding-bottom:88px}
  .exp{padding-bottom:88px}
  .cta{padding-top:88px;padding-bottom:88px}
}

@media (max-width:680px){
  :root{--pad:22px}
  .band__inner{justify-content:flex-start;gap:20px 32px}
  .case__media{height:auto;grid-template-columns:1fr 1fr}
  .case--flip .case__media{grid-template-columns:1fr 1fr}
  .case__media figure{aspect-ratio:3/4}
  .case__big--fit{aspect-ratio:3/4}
  .case__big--fit img{object-fit:contain}
  .stats{gap:32px}
  .stats__item dt{font-size:32px}
  .foot__top{flex-direction:column;gap:36px}
  .foot__nav{gap:40px}
  .foot__bottom{padding-top:32px}
  .filter{font-size:11px;letter-spacing:1px}
  .filters{gap:18px}
  .cta__info{gap:28px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}