/* 随轩 · 改版预览 · skins
   Every link that points at an article dresses like the room that article lives in:
   cards on the home page, prev/next, related posts, link previews, badges.
   .sk-phil 哲学与思想 · .sk-hps 科学史与学术 · .sk-cult 文化与公共评论 · .sk-ai AI 与技术未来
   .sk-web3 Web3 与密码朋克 · .sk-teach 教学与课程 · .sk-life 生活与随记 · .sk-site 站务与琐事 */

.sk-phil  { --sk-bg: #EFECE4; --sk-bg2: #E4DFD3; --sk-ink: #1C1A17; --sk-muted: #6A645B; --sk-acc: #A72D27; --sk-ft: var(--f-serif); --sk-fw: 900; --sk-fs: 19px; }
.sk-hps   { --sk-bg: #F5F3EC; --sk-bg2: #4E171B; --sk-ink: #1E211E; --sk-muted: #5D615A; --sk-acc: #7A2A2E; --sk-ft: var(--f-serif); --sk-fw: 700; --sk-fs: 18px; }
.sk-cult  { --sk-bg: #FFFFFF; --sk-bg2: #FFD23F; --sk-ink: #141414; --sk-muted: #55524C; --sk-acc: #D7352A; --sk-ft: "YH Gu QingKe", "ZCOOL QingKe HuangYou", var(--f-ui); --sk-fw: 400; --sk-fs: 22px; }
.sk-ai    { --sk-bg: #F7F8F9; --sk-bg2: #E4E7E9; --sk-ink: #121619; --sk-muted: #56606A; --sk-acc: #1F5FE0; --sk-ft: var(--f-ui); --sk-fw: 900; --sk-fs: 18px; }
.sk-web3  { --sk-bg: #1D2B53; --sk-bg2: #11193A; --sk-ink: #FFF1E8; --sk-muted: #C2C3C7; --sk-acc: #FFA300; --sk-ft: var(--f-ui); --sk-fw: 700; --sk-fs: 18px; }
.sk-teach { --sk-bg: #24453A; --sk-bg2: #1C372E; --sk-ink: #F1F0E8; --sk-muted: #B9C7BE; --sk-acc: #F2D16B; --sk-ft: "YH Gu Hand", "Long Cang", var(--f-ui); --sk-fw: 400; --sk-fs: 25px; }
.sk-life  { --sk-bg: #FFFFFF; --sk-bg2: #F2EFE9; --sk-ink: #2E2B28; --sk-muted: #6F6A64; --sk-acc: #B83A32; --sk-ft: "YH Gu KuaiLe", "ZCOOL KuaiLe", var(--f-ui); --sk-fw: 400; --sk-fs: 21px; }
.sk-site  { --sk-bg: #C3C3C3; --sk-bg2: #FFFFFF; --sk-ink: #000000; --sk-muted: #404040; --sk-acc: #0000EE; --sk-ft: var(--f-serif); --sk-fw: 700; --sk-fs: 17px; }

/* ---------- article card ---------- */
.card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  text-decoration: none; color: var(--sk-ink); background: var(--sk-bg);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s;
}
.card__img { position: relative; display: block; aspect-ratio: 5 / 2; overflow: hidden; background: var(--sk-bg2); }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.card:hover .card__img img { transform: scale(1.045); }
.card__pat { display: block; aspect-ratio: 5 / 2; }
.card__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 14px 16px 16px; }
.card__cat { font-size: 12.5px; letter-spacing: .04em; color: var(--sk-acc); }
.card__t { font-family: var(--sk-ft); font-weight: var(--sk-fw); font-size: var(--sk-fs); line-height: 1.42; text-wrap: pretty; }
.card__x { font-size: 14px; line-height: 1.75; color: var(--sk-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card__d { margin-top: auto; padding-top: 4px; font-size: 13px; color: var(--sk-muted); font-variant-numeric: tabular-nums; }

/* 哲学 · rice paper, ink, a seal */
.card.sk-phil { border: 1px solid rgba(28, 26, 23, .3); background-image: url("../img/tex-paper.png"); }
.card.sk-phil .card__img img { mix-blend-mode: multiply; filter: saturate(.7); }
.card.sk-phil .card__pat { background: radial-gradient(110% 80% at 22% 115%, rgba(28, 26, 23, .62), transparent 62%), radial-gradient(70% 60% at 88% 0%, rgba(28, 26, 23, .22), transparent 70%), #E7E2D6; }
.card.sk-phil::after {
  content: "哲"; position: absolute; right: 14px; bottom: 14px; width: 26px; height: 26px; display: grid; place-items: center;
  background: var(--sk-acc); color: #F6EFE6; font-family: var(--f-brush); font-size: 18px; line-height: 1; border-radius: 3px; transform: rotate(-4deg);
}
.card.sk-phil .card__d { padding-right: 36px; }
.card.sk-phil:hover { box-shadow: 0 0 0 1px var(--sk-ink), 0 18px 30px -18px rgba(28, 26, 23, .45); }

/* 科学史 · museum label, brass rule, catalogue number */
.card.sk-hps { border: 1px solid #9A7A3A; outline: 1px solid rgba(154, 122, 58, .5); outline-offset: -6px; }
.card.sk-hps .card__img { margin: 10px 10px 0; }
.card.sk-hps .card__img img { filter: sepia(.35) contrast(1.05); }
.card.sk-hps .card__pat { margin: 10px 10px 0; background: repeating-linear-gradient(90deg, rgba(198, 164, 92, .22) 0 1px, transparent 1px 24px), linear-gradient(#6A2328, #4E171B); }
.card.sk-hps .card__cat[data-no]::after { content: "  № " attr(data-no); font-family: "EB Garamond", var(--f-serif); font-style: italic; font-size: 14px; color: #8A6B2E; }
.card.sk-hps:hover { box-shadow: 0 16px 28px -16px rgba(30, 33, 30, .45); transform: translateY(-3px); }

/* 文化与公共评论 · pasted posters */
.card.sk-cult { border: 2.5px solid #141414; box-shadow: 6px 6px 0 #141414; transform: rotate(-.5deg); }
.card.sk-cult::before { content: ""; position: absolute; z-index: 2; top: -11px; left: 22px; width: 70px; height: 22px; background: rgba(250, 232, 160, .88); transform: rotate(-5deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.card.sk-cult .card__img::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(20, 20, 20, .38) 1px, transparent 1.35px) 0 0 / 5px 5px; mix-blend-mode: multiply; }
.card.sk-cult .card__img img { filter: contrast(1.12) saturate(1.1); }
.card.sk-cult .card__pat { background: radial-gradient(circle at 30% 30%, #141414 1.6px, transparent 2px) 0 0 / 9px 9px, #FFD23F; }
.card.sk-cult .card__cat { align-self: flex-start; background: var(--sk-acc); color: #FFFFFF; padding: 1px 8px; font-weight: 700; letter-spacing: .08em; }
.card.sk-cult .card__t { line-height: 1.25; letter-spacing: .01em; }
.card.sk-cult:hover { transform: rotate(0) translate(-2px, -2px); box-shadow: 9px 9px 0 #141414; }

/* AI · machine vision: detection brackets */
.card.sk-ai { border: 1px solid #C9D0D6; }
.card.sk-ai .card__img::after {
  content: ""; position: absolute; inset: 12px; transition: inset .3s cubic-bezier(.2, .8, .2, 1);
  --c: #1F8FFF;
  background:
    linear-gradient(var(--c), var(--c)) top left / 18px 2px, linear-gradient(var(--c), var(--c)) top left / 2px 18px,
    linear-gradient(var(--c), var(--c)) top right / 18px 2px, linear-gradient(var(--c), var(--c)) top right / 2px 18px,
    linear-gradient(var(--c), var(--c)) bottom left / 18px 2px, linear-gradient(var(--c), var(--c)) bottom left / 2px 18px,
    linear-gradient(var(--c), var(--c)) bottom right / 18px 2px, linear-gradient(var(--c), var(--c)) bottom right / 2px 18px;
  background-repeat: no-repeat;
}
.card.sk-ai:hover .card__img::after { inset: 5px; }
.card.sk-ai .card__pat { background: repeating-linear-gradient(0deg, rgba(31, 95, 224, .1) 0 1px, transparent 1px 16px), repeating-linear-gradient(90deg, rgba(31, 95, 224, .1) 0 1px, transparent 1px 16px), #EEF1F4; }
.card.sk-ai .card__cat { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0; }
.card.sk-ai .card__cat::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; background: #F2541B; vertical-align: 1px; }
.card.sk-ai .card__t { letter-spacing: -.01em; }
.card.sk-ai:hover { border-color: #1F8FFF; }

/* Web3 · pixel window, block number */
.card.sk-web3 { margin: 4px; box-shadow: 0 -4px 0 #FFF1E8, 0 4px 0 #FFF1E8, -4px 0 0 #FFF1E8, 4px 0 0 #FFF1E8; transition: transform .2s steps(3), box-shadow .2s steps(3); }
.card.sk-web3 .card__img { border-bottom: 4px solid #FFF1E8; }
.card.sk-web3 .card__img img { image-rendering: pixelated; }
.card.sk-web3 .card__pat { border-bottom: 4px solid #FFF1E8; background: conic-gradient(#29ADFF 25%, transparent 0 50%, #29ADFF 0 75%, transparent 0) 0 0 / 24px 24px, #1D2B53; }
.card.sk-web3 .card__cat, .card.sk-web3 .card__d { font-family: var(--f-pixel); font-size: 12px; letter-spacing: 0; }
.card.sk-web3 .card__cat[data-no]::after { content: "  #" attr(data-no); color: #29ADFF; }
.card.sk-web3:hover { transform: translate(-4px, -4px); box-shadow: 0 -4px 0 #FFF1E8, 0 4px 0 #FFF1E8, -4px 0 0 #FFF1E8, 4px 0 0 #FFF1E8, 8px 8px 0 #000000; }

/* 教学 · chalkboard in a wooden frame */
.card.sk-teach { border: 7px solid #7B5232; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), 0 10px 20px -12px rgba(0, 0, 0, .5); background-image: linear-gradient(rgba(36, 69, 58, .62), rgba(36, 69, 58, .62)), url("../img/tex-chalk.png"); }
.card.sk-teach .card__img { margin: 14px 14px 0; border: 5px solid #F8F7F2; transform: rotate(-1.2deg); box-shadow: 0 6px 12px rgba(0, 0, 0, .35); overflow: visible; }
.card.sk-teach .card__pat { background: linear-gradient(transparent 46%, rgba(241, 240, 232, .55) 47% 48%, transparent 49%), linear-gradient(100deg, transparent 20%, rgba(242, 209, 107, .5) 21% 22%, transparent 23%); }
.card.sk-teach .card__t { line-height: 1.2; }
.card.sk-teach:hover .card__t { text-decoration: underline wavy rgba(242, 209, 107, .8) 2px; text-underline-offset: 6px; }

/* 生活 · polaroid with washi tape */
.card.sk-life { padding: 10px 10px 0; box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 12px 26px -8px rgba(46, 43, 40, .22); transform: rotate(.7deg); }
.card.sk-life::before { content: ""; position: absolute; z-index: 2; top: -12px; left: 50%; width: 96px; height: 24px; margin-left: -48px; background: repeating-linear-gradient(45deg, rgba(191, 227, 213, .92) 0 8px, rgba(168, 214, 197, .92) 8px 16px); transform: rotate(-3deg); }
.card.sk-life .card__pat { background: radial-gradient(#D2CEC5 1.2px, transparent 1.5px) 0 0 / 14px 14px, #FBFAF7; }
.card.sk-life .card__d { font-family: "YH Gu Hand", "Long Cang", var(--f-ui); font-size: 19px; }
.card.sk-life:hover { transform: rotate(-.6deg) translateY(-4px); }

/* 站务 · a 2005 window */
.card.sk-site { border: 2px solid; border-color: #FFFFFF #404040 #404040 #FFFFFF; padding: 3px; box-shadow: 1px 1px 0 #000000; }
.card.sk-site::before { content: attr(data-bar); display: block; height: 24px; padding: 0 8px; background: linear-gradient(90deg, #0A246A, #3A6EA5); color: #FFFFFF; font: 12px/24px var(--f-pixel); white-space: nowrap; overflow: hidden; }
.card.sk-site .card__img { margin-top: 3px; border: 2px solid; border-color: #808080 #FFFFFF #FFFFFF #808080; }
.card.sk-site .card__pat { margin-top: 3px; background: repeating-linear-gradient(45deg, #FFD800 0 12px, #1A1A1A 12px 24px); border: 2px solid; border-color: #808080 #FFFFFF #FFFFFF #808080; }
.card.sk-site .card__body { margin-top: 3px; background: #FFFFFF; border: 2px solid; border-color: #808080 #FFFFFF #FFFFFF #808080; }
.card.sk-site .card__t { color: #0000EE; text-decoration: underline; text-underline-offset: 3px; }
.card.sk-site .card__cat { color: #008000; font-family: var(--f-pixel); font-size: 12px; }
.card.sk-site:hover .card__t { color: #CC0000; }

/* ---------- small badge: the room name, dressed like the room ---------- */
.bdg { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; font-size: 12px; line-height: 1; white-space: nowrap; border-radius: 2px; text-decoration: none; }
.bdg.sk-phil { background: #A72D27; color: #F6EFE6; font-family: var(--f-serif); font-weight: 700; }
.bdg.sk-hps { background: #F5F3EC; color: #6A2328; border: 1px solid #9A7A3A; font-family: var(--f-serif); }
.bdg.sk-cult { background: #141414; color: #FFD23F; font-weight: 700; }
.bdg.sk-ai { background: #F7F8F9; color: #1F5FE0; border: 1px solid #1F8FFF; font-family: var(--f-mono); border-radius: 0; }
.bdg.sk-web3 { background: #1D2B53; color: #FFA300; font-family: var(--f-pixel); border-radius: 0; box-shadow: 0 0 0 2px #FFF1E8; }
.bdg.sk-teach { background: #24453A; color: #F1F0E8; font-family: "YH Gu Hand", "Long Cang", var(--f-ui); font-size: 16px; }
.bdg.sk-life { background: #F7D8CC; color: #6B2E28; border-radius: 11px; font-family: "YH Gu KuaiLe", "ZCOOL KuaiLe", var(--f-ui); font-size: 13px; }
.bdg.sk-site { background: #C3C3C3; color: #000000; border: 2px solid; border-color: #FFFFFF #404040 #404040 #FFFFFF; border-radius: 0; font-family: var(--f-pixel); }

/* ---------- link preview: hovering an internal link shows the target in its own clothes ---------- */
.lp { text-align: left; text-indent: 0; font-size: 14px; line-height: 1.6; }
.lp .card { box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .35); }
.lp .card__body { padding: 12px 14px 14px; gap: 4px; }
.lp .card__t { font-size: calc(var(--sk-fs) - 2px); }
.lp .card__x { -webkit-line-clamp: 2; font-family: var(--f-ui); }

/* ---------- hanging boards (水牌): the hall wall and the topics menu ---------- */
.plaques { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px; }
.plq { position: relative; padding-top: 30px; animation: plq-in 1s cubic-bezier(.34, 1.56, .64, 1) .12s both; }
.plq::before { content: ""; position: absolute; top: 2px; left: 50%; width: 46%; height: 30px; transform: translateX(-50%); border: 1.5px solid #3A281D; border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.plq::after { content: ""; position: absolute; top: -3px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: #2A1C13; }
.plq > a {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  height: 262px; padding: 18px 4px 14px; text-decoration: none; color: var(--sk-ink); background: var(--sk-bg);
  transform-origin: 50% -30px; box-shadow: 0 16px 22px -16px rgba(0, 0, 0, .5);
}
.plq > a:hover, .plq > a:focus-visible { animation: plq-swing 1.4s cubic-bezier(.3, .7, .4, 1); }
.plq__name { writing-mode: vertical-rl; font-family: var(--sk-ft); font-weight: var(--sk-fw); font-size: 21px; line-height: 1.15; letter-spacing: .14em; white-space: nowrap; }
.plq__name .tcy { text-combine-upright: all; letter-spacing: 0; }
.plq__n { font-size: 12px; line-height: 1.2; text-align: center; color: var(--sk-muted); font-variant-numeric: tabular-nums; }
@keyframes plq-in { from { opacity: 0; transform: translateY(-30px) rotate(-5deg); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes plq-swing { 0% { transform: rotate(0); } 14% { transform: rotate(5.5deg); } 32% { transform: rotate(-4deg); } 52% { transform: rotate(2.2deg); } 72% { transform: rotate(-1deg); } 100% { transform: rotate(0); } }

.plq.sk-phil > a { border: 1px solid rgba(28, 26, 23, .5); background-image: url("../img/tex-paper.png"); }
.plq.sk-phil > a::after { content: "古雴"; position: absolute; bottom: 38px; width: 24px; padding: 3px 0; background: #A72D27; color: #F6EFE6; font: 12px/1.05 var(--f-brush); text-align: center; writing-mode: vertical-rl; border-radius: 2px; }
.plq.sk-hps > a { background: linear-gradient(#6A2328, #4E171B); color: #E7D3A2; border: 3px double #B08D57; }
.plq.sk-hps .plq__name { color: #EADBB4; }
.plq.sk-hps .plq__n { color: #C9B27C; font-family: "EB Garamond", var(--f-serif); font-style: italic; font-size: 14px; }
.plq.sk-cult > a { background: #FFD23F; border: 3px solid #141414; }
.plq.sk-cult > a::before { content: ""; position: absolute; top: -8px; left: 50%; width: 46px; height: 16px; margin-left: -23px; background: rgba(255, 255, 255, .7); transform: rotate(-6deg); }
.plq.sk-cult .plq__name { font-size: 25px; letter-spacing: .04em; }
.plq.sk-cult .plq__n { color: #141414; font-weight: 700; }
.plq.sk-ai > a { border: 1px solid #C9D0D6; background: linear-gradient(#F7F8F9, #F7F8F9) padding-box; }
.plq.sk-ai > a::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 10px; background: repeating-linear-gradient(-45deg, #F2541B 0 7px, #121619 7px 14px); }
.plq.sk-ai .plq__name { margin-top: 6px; }
.plq.sk-ai .plq__n { font-family: var(--f-mono); color: #1F5FE0; }
.plq.sk-web3 > a { margin-inline: 4px; box-shadow: 0 -4px 0 #FFF1E8, 0 4px 0 #FFF1E8, -4px 0 0 #FFF1E8, 4px 0 0 #FFF1E8, 0 18px 22px -14px rgba(0, 0, 0, .6); }
.plq.sk-web3 .plq__name { font-family: var(--f-pixel); font-size: 24px; letter-spacing: 0; color: #FFA300; }
.plq.sk-web3 .plq__n { font-family: var(--f-pixel); color: #29ADFF; }
.plq.sk-teach > a { border: 6px solid #7B5232; background-image: linear-gradient(rgba(36, 69, 58, .62), rgba(36, 69, 58, .62)), url("../img/tex-chalk.png"); }
.plq.sk-teach .plq__name { font-size: 27px; letter-spacing: .02em; }
.plq.sk-teach .plq__n { color: #F2D16B; font-family: "YH Gu Hand", "Long Cang", var(--f-ui); font-size: 17px; }
.plq.sk-life > a { border: 1px solid rgba(46, 43, 40, .12); background: #FFFFFF; }
.plq.sk-life > a::before { content: ""; position: absolute; top: -9px; left: 50%; width: 58px; height: 18px; margin-left: -29px; background: repeating-linear-gradient(45deg, rgba(247, 198, 181, .95) 0 6px, rgba(242, 178, 158, .95) 6px 12px); transform: rotate(4deg); }
.plq.sk-life .plq__name { font-size: 23px; letter-spacing: .06em; }
.plq.sk-life .plq__n { font-family: "YH Gu Hand", "Long Cang", var(--f-ui); font-size: 17px; }
.plq.sk-site > a { padding-top: 30px; border: 2px solid; border-color: #FFFFFF #404040 #404040 #FFFFFF; }
.plq.sk-site > a::before { content: ""; position: absolute; top: 2px; left: 2px; right: 2px; height: 16px; background: linear-gradient(90deg, #0A246A, #3A6EA5); }
.plq.sk-site .plq__name { font-family: var(--f-pixel); font-size: 24px; letter-spacing: 0; }
.plq.sk-site .plq__n { font-family: var(--f-pixel); color: #000000; }

/* the fortune-stick draw: one random old post */
.hall__r { display: grid; gap: 30px; }
.draw { display: flex; align-items: flex-end; gap: 18px; min-height: 120px; }
.draw__cup { flex: none; width: 66px; height: 104px; transform-origin: 50% 100%; }
.draw__cup svg { width: 100%; height: 100%; overflow: visible; }
.draw__cup.is-shaking { animation: cup-shake .55s ease-in-out; }
.draw__cup.is-shaking2 { animation: cup-shake2 .55s ease-in-out; }
@keyframes cup-shake { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-11deg); } 35% { transform: rotate(9deg); } 55% { transform: rotate(-7deg); } 75% { transform: rotate(5deg); } }
@keyframes cup-shake2 { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-11deg); } 35% { transform: rotate(9deg); } 55% { transform: rotate(-7deg); } 75% { transform: rotate(5deg); } }
.draw__hint { font-size: 14px; color: var(--muted); padding-bottom: 6px; max-width: 18em; }
.draw__stick { position: relative; display: grid; gap: 4px; max-width: 340px; padding: 12px 16px 12px 46px; text-decoration: none; color: var(--sk-ink); background: var(--sk-bg); border: 1px solid rgba(0, 0, 0, .18); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .45); animation: stick-out .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.draw__stick::before { content: "签"; position: absolute; left: 10px; top: 10px; bottom: 10px; width: 24px; display: grid; place-items: center; background: #C9A15B; color: #3A2812; font-family: var(--f-brush); font-size: 20px; border-radius: 2px; }
.draw__stick b { font-family: var(--sk-ft); font-weight: var(--sk-fw); font-size: 17px; line-height: 1.4; }
.draw__stick small { font-size: 12.5px; color: var(--sk-muted); }
@keyframes stick-out { from { opacity: 0; transform: translateY(26px) rotate(-6deg); } to { opacity: 1; transform: none; } }
.draw__stick.is-b { animation-name: stick-out-b; }
@keyframes stick-out-b { from { opacity: 0; transform: translateY(26px) rotate(-6deg); } to { opacity: 1; transform: none; } }