/* 首页正文里的小图标入口：作品集 / 手记 / 途中。每个图标是一枚小玻璃块，里面放对应内容的缩影 */
.icon-link{white-space:nowrap;color:#3e453e;text-decoration:none;margin:0 2px}
.icon-link .word{text-decoration:underline;text-decoration-color:#c8cec5;text-underline-offset:4px;text-decoration-thickness:1px;transition:text-decoration-color .2s,color .2s}
.icon-link:hover{color:var(--ink)}
.icon-link:hover .word{text-decoration-color:var(--accent)}

.glyph{position:relative;display:inline-block;width:28px;height:28px;border-radius:8px;vertical-align:middle;margin:-8px 7px -6px 0;top:-1px;
  background:linear-gradient(150deg,#ffffff 0%,#f4f5f1 55%,#eceee8 100%);
  box-shadow:inset 0 0 0 1px rgba(44,52,42,.09),inset 0 1px 0 rgba(255,255,255,.95),0 1px 1px rgba(44,52,42,.06),0 4px 10px -5px rgba(44,52,42,.28);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.glyph::after{content:"";position:absolute;inset:1px 1px 55% 1px;border-radius:7px 7px 3px 3px;background:linear-gradient(rgba(255,255,255,.75),rgba(255,255,255,0));pointer-events:none;z-index:4}
.icon-link:hover .glyph,.icon-link:focus-visible .glyph{transform:translateY(-2px) rotate(-3deg);box-shadow:inset 0 0 0 1px rgba(44,52,42,.11),inset 0 1px 0 #fff,0 2px 2px rgba(44,52,42,.06),0 9px 16px -7px rgba(44,52,42,.34)}
.glyph i{position:absolute;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}

/* 作品集：三本小书，悬停时散开 */
.glyph-works i{width:10px;height:14px;top:7px;left:9px;border-radius:1px 2px 2px 1px;background-size:cover;background-position:center;box-shadow:inset 1.5px 0 0 rgba(0,0,0,.22),0 1px 2px rgba(0,0,0,.18)}
.glyph-works i:nth-child(1){transform:translate(-4px,1px) rotate(-10deg);z-index:1}
.glyph-works i:nth-child(2){transform:translate(0,0);z-index:2}
.glyph-works i:nth-child(3){transform:translate(4px,1px) rotate(10deg);z-index:3}
.icon-link:hover .glyph-works i:nth-child(1){transform:translate(-6px,0) rotate(-17deg)}
.icon-link:hover .glyph-works i:nth-child(2){transform:translate(0,-2px)}
.icon-link:hover .glyph-works i:nth-child(3){transform:translate(6px,0) rotate(17deg)}

/* 手记：一张写了几行字的纸，悬停时掀起一角 */
.glyph-notes i:nth-child(1){left:8px;top:6px;width:13px;height:16px;border-radius:1.5px;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.1);
  background-image:linear-gradient(#a9b0a5,#a9b0a5),linear-gradient(#c3c8bf,#c3c8bf),linear-gradient(#c3c8bf,#c3c8bf),linear-gradient(#c3c8bf,#c3c8bf);
  background-size:7px 1px,9px 1px,8px 1px,5px 1px;background-repeat:no-repeat;background-position:2px 3px,2px 6px,2px 9px,2px 12px;transform-origin:0 100%}
.glyph-notes i:nth-child(2){left:16px;top:13px;width:2px;height:10px;border-radius:1px;background:linear-gradient(#536252 0 80%,#d9c9a3 80%);transform:rotate(35deg);transform-origin:50% 100%}
.icon-link:hover .glyph-notes i:nth-child(1){transform:rotate(-6deg)}
.icon-link:hover .glyph-notes i:nth-child(2){transform:rotate(18deg) translate(-1px,-1px)}

/* 途中：两张小照片，悬停时错开 */
.glyph-life i{width:13px;height:15px;top:6px;left:8px;background-size:cover;background-position:center;border:1.5px solid #fff;border-bottom-width:3px;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.glyph-life i:nth-child(1){transform:translate(-2px,1px) rotate(-8deg)}
.glyph-life i:nth-child(2){transform:translate(2px,0) rotate(6deg)}
.icon-link:hover .glyph-life i:nth-child(1){transform:translate(-5px,1px) rotate(-14deg)}
.icon-link:hover .glyph-life i:nth-child(2){transform:translate(4px,-1px) rotate(10deg)}

@media(max-width:600px){.glyph{width:26px;height:26px;margin:-7px 6px -5px 0}}