/* 共享样式：四个中转页 */
:root{
  --paper:#FBFCFD;
  --ink:#0B1B33;
  --navy:#0A2A5E;
  --mute:#5C6B80;
  --line:rgba(11,27,51,.13);
  --line-soft:rgba(11,27,51,.07);
  --cyan:#2FD4D8;
  --sans:"MiSans","HarmonyOS Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --pad:clamp(22px, 4.2vw, 56px);
  --maxw:1280px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1000px 600px at 84% 0%, rgba(47,212,216,.12), transparent 62%),
    radial-gradient(700px 480px at 2% 0%, rgba(31,111,224,.08), transparent 60%),
    linear-gradient(180deg,#FFFFFF 0%,#FAFCFE 48%,#F4F7FB 100%);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,figure{margin:0}
::selection{background:var(--cyan);color:var(--navy)}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:2px}

/* 顶栏：居中胶囊 */
.top{
  position:fixed; top:18px; left:50%; transform:translateX(-50%);
  z-index:40; display:flex; align-items:center; gap:12px;
  padding:7px 9px 7px 16px; max-width:calc(100vw - 24px);
  border-radius:999px; background:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 10px 30px -18px rgba(11,27,51,.42), inset 0 1px 0 #fff;
  transition:background .35s ease,box-shadow .35s ease;
}
.top.is-stuck{background:rgba(255,255,255,.97);box-shadow:0 16px 36px -20px rgba(11,27,51,.5), inset 0 1px 0 #fff}
.mark{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--navy);white-space:nowrap}
.mark::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(47,212,216,.16)}
.mark span{display:none}
.menu{display:flex;align-items:center;gap:2px}
.menu a{font-size:12.5px;padding:8px 14px;border-radius:999px;white-space:nowrap;transition:background .3s ease,color .3s ease}
.menu a:hover{background:rgba(10,42,94,.07)}
.menu a.on{background:rgba(10,42,94,.08);font-weight:500}
.menu a.cta{padding:8px 16px;background:var(--navy);border:1px solid var(--navy);color:#fff}
.menu a.cta:hover{background:#0E356F;color:#fff}

/* 页面容器 */
.page{max-width:var(--maxw);margin:0 auto;padding:clamp(120px,16vh,168px) var(--pad) clamp(60px,9vh,100px)}
.kicker{
  display:flex;align-items:center;gap:12px;
  font-size:12.5px;color:var(--mute);margin-bottom:20px;
}
.kicker::before{content:"";width:30px;height:1px;background:var(--navy);opacity:.45}
h1{font-size:clamp(34px,5vw,64px);line-height:1.08;letter-spacing:-.03em;font-weight:600;color:var(--ink)}
.lede{max-width:52ch;margin-top:18px;font-size:15px;line-height:1.85;color:var(--mute)}
.meta{
  display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,36px);
  margin-top:30px;padding-top:16px;border-top:1px solid var(--line-soft);
  font-size:12.5px;color:var(--mute);
}
.meta b{display:block;font-size:19px;font-weight:600;color:var(--navy);letter-spacing:-.01em}

/* 区块标题 */
.sec-head{
  position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  margin:clamp(48px,8vh,84px) 0 clamp(20px,3vh,32px);
  padding-bottom:14px;border-bottom:1px solid var(--line);
}
.sec-head h2{font-size:clamp(20px,2.2vw,26px);font-weight:600;letter-spacing:-.01em;color:var(--navy)}
.sec-head p{font-size:12px;color:var(--mute);letter-spacing:.05em}
.sec-head::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--navy);opacity:.5;transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--ease) .1s;
}
body.loaded .sec-head::after{transform:scaleX(1)}

/* 作品列表（大图） */
.gallery{display:grid;gap:clamp(28px,5vh,56px)}
.piece{display:block}
.piece .frame{
  background:#fff;padding:clamp(8px,1vw,14px);border:1px solid var(--line-soft);
  box-shadow:0 1px 2px rgba(11,27,51,.05);
  transition:box-shadow .5s var(--ease),border-color .5s ease;
}
.piece:hover .frame{border-color:var(--line);box-shadow:0 24px 44px -24px rgba(11,27,51,.35)}
.piece img{width:100%;height:auto;display:block}
.piece .cap{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:12px}
.piece .cap b{font-size:17px;font-weight:500;color:var(--navy)}
.piece .cap span{font-size:12px;color:var(--mute)}

/* 素材缩略 */
.thumbs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.2vw,28px)}
.thumbs figure{margin:0}
.thumbs img{
  width:100%;height:auto;display:block;background:#E8EDF5;
  border:1px solid var(--line-soft);border-radius:2px;
}
.thumbs figcaption{margin-top:8px;font-size:11.5px;color:var(--mute)}

/* 分类列表 */
.rows{border-top:1px solid var(--line-soft)}
.rows .row{
  display:grid;grid-template-columns:56px 1fr 120px;gap:clamp(12px,2vw,24px);align-items:baseline;
  padding:20px 4px;border-bottom:1px solid var(--line-soft);
  transition:padding-left .4s var(--ease),background .4s ease;
}
.rows .row:hover{padding-left:14px;background:linear-gradient(90deg,rgba(47,212,216,.07),transparent 70%)}
.rows .n{font-size:12.5px;color:rgba(11,27,51,.42);letter-spacing:.04em}
.rows h3{font-size:16px;font-weight:500;color:var(--navy)}
.rows p{font-size:12.5px;color:var(--mute);margin-top:2px}
.rows .count{justify-self:end;font-size:12px;color:var(--mute);white-space:nowrap}

/* 字体样本 */
.spec{
  display:grid;grid-template-columns:200px 1fr;gap:clamp(16px,3vw,40px);
  align-items:baseline;padding:clamp(20px,3vh,30px) 4px;
  border-bottom:1px solid var(--line-soft);
  transition:background .4s ease,padding-left .4s var(--ease);
}
.spec:hover{background:rgba(47,212,216,.05);padding-left:14px}
.spec .name{font-size:12.5px;color:var(--mute);letter-spacing:.03em}
.spec .name b{display:block;font-size:14px;font-weight:500;color:var(--navy);margin-bottom:2px;font-family:var(--sans)}
.spec .sample{
  font-size:clamp(28px,3.4vw,46px);line-height:1.15;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* 结尾 CTA */
.more-cta{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-top:clamp(44px,7vh,72px);
  padding:clamp(22px,3.4vh,30px) clamp(22px,3vw,32px);
  border:1px solid var(--navy);border-radius:2px;
  color:var(--navy);
  transition:background .4s ease,color .4s ease;
}
.more-cta:hover{background:var(--navy);color:#fff}
.more-cta .t{display:block;font-size:clamp(17px,1.8vw,21px);font-weight:600;letter-spacing:-.01em}
.more-cta .s{display:block;margin-top:4px;font-size:12.5px;opacity:.62}
.more-cta svg{width:22px;height:22px;flex:none;transition:transform .4s var(--ease)}
.more-cta:hover svg{transform:translate(3px,-3px)}

.note{max-width:72ch;margin:16px 0 0;font-size:12.5px;line-height:1.85;color:var(--mute)}
.prose{max-width:62ch;display:grid;gap:16px}
.prose p{font-size:15px;line-height:1.95;color:var(--mute)}
.prose p:first-child{color:var(--ink)}

/* 页脚 */
footer{background:#06182F;color:#fff;margin-top:clamp(40px,8vh,90px)}
.foot{
  max-width:var(--maxw);margin:0 auto;padding:clamp(44px,6vh,64px) var(--pad) 36px;
  display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,.7fr));gap:clamp(24px,4vw,48px);
}
.foot .sign{font-size:15px;font-weight:600}
.foot .sign span{display:block;margin-top:10px;font-size:13px;font-weight:400;color:rgba(255,255,255,.55);max-width:26ch;line-height:1.7}
.foot h4{margin:0 0 14px;font-size:11.5px;color:rgba(255,255,255,.42);letter-spacing:.1em;font-weight:500}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot li a{font-size:13px;color:rgba(255,255,255,.72);transition:color .3s}
.foot li a:hover{color:#fff}
.copy{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) 32px;
  font-size:11.5px;color:rgba(255,255,255,.32);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}

/* 入场 */
.rise{opacity:0;translate:0 22px;transition:opacity .7s var(--ease),translate .7s var(--ease)}
.rise.in{opacity:1;translate:0 0}

@media (max-width:820px){
  .top{top:12px;padding:6px 8px 6px 12px;gap:8px;justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
  .top::-webkit-scrollbar{display:none}
  .menu a{font-size:12px;padding:7px 11px}
  .menu a.cta{display:none}
  .page{padding-top:104px}
  .spec{grid-template-columns:1fr;gap:8px}
  .thumbs{grid-template-columns:1fr}
  .rows .row{grid-template-columns:36px 1fr;row-gap:2px}
  .rows .count{justify-self:start;grid-column:2}
  .foot{grid-template-columns:1fr 1fr;gap:26px}
  .foot .sign{grid-column:1/-1}
}
@media (max-width:430px){
  .menu{gap:10px}
  .menu a{font-size:12px}
  .top{padding:14px 18px}
  :root{--pad:18px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .rise{opacity:1;translate:none}
}