:root {
  --shanhe-paper: #f1eadc;
  --shanhe-paper-deep: #e3d8c5;
  --shanhe-ink: #161a18;
  --shanhe-soft: #5e625d;
  --shanhe-red: #813b34;
  --shanhe-gold: #b49461;
  --shanhe-jade: #62776b;
  --shanhe-line: rgba(34, 40, 36, .16);
  --shanhe-serif: "Noto Serif SC", "Songti SC", STSong, SimSun, serif;
  --shanhe-kai: KaiTi, "STKaiti", "FangSong", serif;
  --shanhe-sans: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
}

html { scroll-behavior: smooth; }
body.skin-bluesky {
  min-width: 0;
  color: var(--shanhe-ink);
  background:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,.65), transparent 32rem),
    repeating-linear-gradient(0deg, rgba(89,69,43,.018) 0 1px, transparent 1px 4px),
    var(--shanhe-paper);
  font-family: var(--shanhe-serif);
}

a, a:link, a:visited { color: inherit; text-decoration: none; }
::selection { color: #fff; background: var(--shanhe-red); }

#top_nav {
  z-index: 80;
  height: 48px;
  color: rgba(255,255,255,.78);
  border: 0;
  background: rgba(12,16,14,.88);
  backdrop-filter: blur(16px);
}
.navbar-main { max-width: 1240px; }
.navbar-branding img { filter: grayscale(1) brightness(2); opacity: .7; }
.navbar-list > li > a { color: rgba(255,255,255,.68) !important; }
.navbar-list > li > a:hover { color: #fff !important; }

#home {
  width: 100%;
  max-width: none;
  margin: 0;
  background: transparent;
}

#header {
  position: relative;
  height: min(860px, calc(100vh - 48px));
  min-height: 680px;
  margin: 0;
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(7,12,10,.84) 0%, rgba(9,14,12,.44) 45%, rgba(8,13,11,.22) 72%),
    linear-gradient(0deg, rgba(7,10,9,.82) 0%, transparent 48%),
    url("https://images.unsplash.com/photo-1517248980687-80aa4dfd5218?auto=format&fit=crop&w=2200&q=88") center 54% / cover no-repeat;
  animation: shanheHeroIn 1.3s ease-out both;
}
#header::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(circle at 76% 24%, rgba(218,186,131,.2), transparent 18%),
    linear-gradient(105deg, transparent 56%, rgba(255,255,255,.06));
  pointer-events: none;
}
#header::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 72vw;
  height: 34vh;
  right: -20vw;
  bottom: 4vh;
  border-radius: 50%;
  background: rgba(232,237,230,.16);
  filter: blur(60px);
  animation: shanheMist 12s ease-in-out infinite alternate;
  pointer-events: none;
}

#blogTitle {
  position: absolute;
  z-index: 10;
  top: 9vh;
  left: max(5vw, calc((100vw - 1240px) / 2));
  width: auto;
  margin: 0;
  padding: 0;
}
#blogLogo { display: none; }
#blogTitle h1 { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: .24em; }
#blogTitle h1 a { color: #fff; text-shadow: none; }
#blogTitle h1 a::before {
  content: "墨";
  width: 42px;
  height: 42px;
  margin-right: 14px;
  display: inline-grid;
  place-items: center;
  color: #ead9bc;
  border: 1px solid rgba(234,217,188,.7);
  background: var(--shanhe-red);
  font: 20px var(--shanhe-kai);
  vertical-align: middle;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.08);
}
#blogTitle h2 {
  margin: 12px 0 0 60px;
  color: rgba(255,255,255,.52);
  font: 10px var(--shanhe-sans);
  letter-spacing: .3em;
}

#navigator {
  position: absolute;
  z-index: 10;
  right: max(5vw, calc((100vw - 1240px) / 2));
  bottom: 38px;
  left: max(5vw, calc((100vw - 1240px) / 2));
  height: auto;
  padding: 22px 0 0;
  color: rgba(255,255,255,.72);
  border-top: 1px solid rgba(255,255,255,.22);
  background: transparent;
}
#navList {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.3vw, 36px);
}
#navList li {
  position: relative;
  float: none;
}
#navigator #navList > li > a.menu {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 10px 2px 9px !important;
  color: rgba(255,255,255,.68) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font: 11px var(--shanhe-sans);
  letter-spacing: .18em;
  line-height: 1.4 !important;
  text-shadow: 0 1px 12px rgba(0,0,0,.46);
  white-space: nowrap;
  transform: translateY(0);
  transition: color .28s ease, transform .28s ease, text-shadow .28s ease;
}
#navigator #navList > li > a.menu::before {
  content: "";
  width: 4px;
  height: 4px;
  margin-right: 9px;
  border: 1px solid rgba(217,181,112,.7);
  opacity: .48;
  transform: rotate(45deg);
  transition: opacity .28s ease, background-color .28s ease, box-shadow .28s ease;
}
#navigator #navList > li > a.menu::after {
  content: "";
  position: absolute;
  right: 100%;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d9b570 18%, #f1dfb7 82%, transparent);
  box-shadow: 0 0 10px rgba(217,181,112,.26);
  transition: right .3s ease;
}
#navigator #navList > li > a.menu:hover,
#navigator #navList > li > a.menu:focus-visible {
  color: #fff8e9 !important;
  background: transparent !important;
  text-shadow: 0 0 18px rgba(217,181,112,.28);
  transform: translateY(-2px);
}
#navigator #navList > li > a.menu:hover::before,
#navigator #navList > li > a.menu:focus-visible::before {
  background: #d9b570;
  box-shadow: 0 0 12px rgba(217,181,112,.52);
  opacity: 1;
}
#navigator #navList > li > a.menu:hover::after,
#navigator #navList > li > a.menu:focus-visible::after {
  right: 0;
}
#navigator #navList > li > #blog_nav_myhome {
  color: #ead5aa !important;
}
#navigator #navList > li > #blog_nav_myhome::before {
  background: #d9b570;
  opacity: .9;
}
.blogStats { position: absolute; right: 0; bottom: 6px; color: rgba(255,255,255,.42); font: 10px var(--shanhe-sans); letter-spacing: .1em; }

.shanhe-grain {
  position: absolute;
  z-index: 4;
  top: 48px;
  right: 0;
  left: 0;
  height: min(860px, calc(100vh - 48px));
  min-height: 680px;
  opacity: .2;
  pointer-events: none;
  background-image:
    repeating-radial-gradient(circle at 30% 20%, transparent 0 2px, rgba(255,255,255,.23) 3px, transparent 4px);
  background-size: 11px 13px;
  mix-blend-mode: soft-light;
  animation: shanheGrain .28s steps(2) infinite;
}
.shanhe-preface {
  position: absolute;
  z-index: 12;
  top: 30vh;
  left: max(5vw, calc((100vw - 1240px) / 2));
  max-width: 700px;
  color: #fff;
  animation: shanheRise 1s .25s ease-out both;
}
.shanhe-preface > p { margin: 0 0 22px; color: rgba(255,255,255,.62); font: 11px var(--shanhe-sans); letter-spacing: .34em; }
.shanhe-preface > span { position: absolute; top: 48px; left: -48px; color: rgba(255,255,255,.46); font: 12px var(--shanhe-kai); writing-mode: vertical-rl; letter-spacing: .4em; }
.shanhe-preface h2 { margin: 0; font-size: clamp(54px, 6.3vw, 96px); font-weight: 500; line-height: 1.04; letter-spacing: .08em; }
.shanhe-preface h2 em { color: #d6bd91; font-style: normal; }
.shanhe-preface-copy { margin-top: 28px; color: rgba(255,255,255,.72); font: 15px/2 var(--shanhe-kai); letter-spacing: .1em; }
.shanhe-preface > a {
  width: 178px;
  height: 52px;
  margin-top: 32px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  border: 1px solid rgba(231,210,174,.6);
  background: rgba(129,59,52,.72);
  font: 12px var(--shanhe-sans);
  letter-spacing: .2em;
  transition: width .35s, background .35s;
}
.shanhe-preface > a:hover { width: 196px; background: var(--shanhe-red); }
.shanhe-preface > a b { font-size: 18px; font-weight: 400; }

#main {
  width: min(1220px, calc(100% - 48px));
  min-height: 800px;
  margin: 0 auto;
  padding: 110px 0 130px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 286px;
  gap: 72px;
  border: 0;
  background: transparent;
}
#mainContent, #sideBar { float: none; width: auto; min-height: 0; padding: 0; }
#mainContent { overflow: visible; }
.forFlow { margin: 0; }
#sideBar { display: block; }
#sideBarMain { width: auto; }
.sidebar-block, .newsItem, .catListEssay, .catListLink, .catListPostCategory, .catListPostArchive {
  margin-bottom: 32px;
  padding: 24px;
  border: 1px solid var(--shanhe-line);
  background: rgba(255,255,255,.26);
  box-shadow: none;
}
.catListTitle {
  margin: 0 0 18px;
  color: var(--shanhe-red);
  border: 0;
  background: transparent;
  font: 11px var(--shanhe-sans);
  letter-spacing: .2em;
}
.catListTitle::before { content: "卷宗 · "; color: var(--shanhe-gold); }

.shanhe-about-card { padding: 264px 0 0; position: relative; }
.shanhe-about-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: -24px;
  left: -24px;
  height: 232px;
  background:
    linear-gradient(0deg, rgba(13,16,14,.72), transparent 65%),
    url("https://images.unsplash.com/photo-1744782804429-906e2b9c49de?auto=format&fit=crop&w=900&q=84") center / cover;
  filter: saturate(.5) contrast(1.05);
}
.shanhe-about-card > span { color: var(--shanhe-red); font: 10px var(--shanhe-sans); letter-spacing: .18em; }
.shanhe-about-card h3 { margin: 18px 0; font-size: 23px; font-weight: 500; line-height: 1.65; letter-spacing: .06em; }
.shanhe-about-card p { color: var(--shanhe-soft); font: 14px/1.9 var(--shanhe-kai); }
.shanhe-about-card a { margin-top: 18px; padding-bottom: 8px; display: inline-block; border-bottom: 1px solid var(--shanhe-line); font: 10px var(--shanhe-sans); letter-spacing: .1em; }
.shanhe-about-card a:hover { color: var(--shanhe-red); border-color: var(--shanhe-red); }

.day {
  position: relative;
  margin: 0 0 54px;
  padding: 42px 46px 38px;
  border: 1px solid var(--shanhe-line);
  background: rgba(255,255,255,.46);
  box-shadow: 0 20px 55px rgba(35,29,19,.055);
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
}
.day:hover { transform: translateY(-6px); background: rgba(255,255,255,.72); box-shadow: 0 28px 72px rgba(35,29,19,.1); }
.dayTitle { margin: 0 0 24px; color: var(--shanhe-red); border: 0; font: 11px var(--shanhe-sans); letter-spacing: .18em; }
.dayTitle::before { content: "岁时 · "; color: var(--shanhe-gold); }
.postTitle { margin: 0 0 20px; padding: 0; border: 0; font-size: clamp(28px, 3.2vw, 45px); font-weight: 500; line-height: 1.45; letter-spacing: .04em; }
.postTitle a:link, .postTitle a:visited, .postTitle a:active { color: var(--shanhe-ink); }
.postTitle a:hover { color: var(--shanhe-red); }
.postTitle a::after { content: "↗"; margin-left: 14px; color: var(--shanhe-red); font: 18px var(--shanhe-serif); opacity: 0; transition: opacity .25s, transform .25s; display: inline-block; }
.postTitle a:hover::after { opacity: 1; transform: translate(4px,-4px); }
.postCon { padding: 0; color: var(--shanhe-soft); font: 16px/2 var(--shanhe-kai); letter-spacing: .04em; }
.c_b_p_desc { color: inherit; }
.c_b_p_desc_readmore { color: var(--shanhe-red) !important; font: 11px var(--shanhe-sans); letter-spacing: .12em; }
.postDesc { margin-top: 30px; padding-top: 18px; color: #8b887f; border-top: 1px solid var(--shanhe-line); font: 10px var(--shanhe-sans); letter-spacing: .06em; }
.postSeparator { display: none; }

#topics {
  padding: 52px 58px 70px;
  border: 1px solid var(--shanhe-line);
  background: rgba(255,255,255,.55);
  box-shadow: 0 24px 70px rgba(35,29,19,.08);
}
#topics .postTitle { text-align: left; }
#topics .postBody { color: #2c302d; font: 17px/2 var(--shanhe-serif); letter-spacing: .025em; }
#topics .postBody h1, #topics .postBody h2, #topics .postBody h3 {
  color: var(--shanhe-ink);
  border: 0;
  font-family: var(--shanhe-serif);
  font-weight: 600;
}
#topics .postBody h2 { margin-top: 2.5em; padding-left: 18px; border-left: 3px solid var(--shanhe-red); font-size: 1.45em; }
#topics .postBody p { margin: 1.25em 0; }
#topics .postBody blockquote {
  margin: 2em 0;
  padding: 22px 28px;
  color: var(--shanhe-soft);
  border: 0;
  border-left: 3px solid var(--shanhe-gold);
  background: rgba(180,148,97,.09);
  font-family: var(--shanhe-kai);
}
#topics .postBody pre {
  margin: 28px 0;
  padding: 24px !important;
  overflow: auto;
  color: #d9dfd9;
  border: 1px solid rgba(180,148,97,.25) !important;
  border-radius: 0 !important;
  background: #151a17 !important;
  box-shadow: 0 20px 50px rgba(14,18,15,.16);
}
#topics .postBody code { font-family: "Cascadia Code", Consolas, monospace; }
#topics .postBody :not(pre) > code { padding: .16em .42em; color: var(--shanhe-red); background: rgba(129,59,52,.08); }
#topics .postBody table { width: 100%; border-collapse: collapse; }
#topics .postBody th { color: #fff; background: var(--shanhe-jade); }
#topics .postBody td, #topics .postBody th { padding: 12px 14px; border: 1px solid var(--shanhe-line); }

.pager { margin: 45px 0; }
.pager a, .pager span {
  margin: 4px;
  padding: 9px 14px;
  color: var(--shanhe-ink);
  border: 1px solid var(--shanhe-line);
  background: transparent;
}
.pager a:hover, .pager .current { color: #fff; border-color: var(--shanhe-red); background: var(--shanhe-red); }

.shanhe-cinema {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(9,12,10,.9) 0%, rgba(10,13,11,.55) 48%, rgba(10,13,11,.15)),
    linear-gradient(0deg, rgba(8,11,9,.74), transparent 55%),
    url("https://images.unsplash.com/photo-1550319063-51ee8574b126?auto=format&fit=crop&w=2200&q=86") center 42% / cover no-repeat;
  background-attachment: fixed;
}
.shanhe-cinema::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(115deg, transparent 45%, rgba(180,148,97,.08));
  pointer-events: none;
}
.shanhe-cinema > div { position: relative; z-index: 2; max-width: 1220px; margin: 0 auto; padding: 130px 24px; }
.shanhe-cinema p { color: rgba(255,255,255,.55); font: 10px var(--shanhe-sans); letter-spacing: .3em; }
.shanhe-cinema > div > span { position: absolute; top: 135px; right: 26px; color: rgba(255,255,255,.35); font: 12px var(--shanhe-kai); writing-mode: vertical-rl; letter-spacing: .38em; }
.shanhe-cinema h2 { margin: 32px 0; font-size: clamp(44px, 5vw, 78px); font-weight: 500; line-height: 1.28; letter-spacing: .08em; }
.shanhe-cinema blockquote { max-width: 520px; margin: 0; color: #d8c39f; font: 17px/2 var(--shanhe-kai); letter-spacing: .12em; }
.shanhe-colophon {
  padding: 62px 24px 34px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  color: rgba(255,255,255,.68);
  background: #0d100f;
  text-align: center;
}
.shanhe-colophon strong { text-align: left; font-size: 19px; font-weight: 500; letter-spacing: .16em; }
.shanhe-colophon > span { color: rgba(255,255,255,.38); text-align: right; font: 14px var(--shanhe-kai); letter-spacing: .1em; }
.shanhe-colophon small { grid-column: 1/-1; padding-top: 28px; color: rgba(255,255,255,.25); border-top: 1px solid rgba(255,255,255,.09); font: 9px var(--shanhe-sans); letter-spacing: .06em; }
.shanhe-colophon small a:hover { color: rgba(255,255,255,.75); }
#footer { margin: 0; padding: 20px; color: rgba(255,255,255,.35); border: 0; background: #0d100f; font: 10px var(--shanhe-sans); }

#blog-comments-placeholder, #comment_form { margin-top: 50px; }
.feedbackItem { margin-bottom: 24px; padding: 24px; border: 1px solid var(--shanhe-line); background: rgba(255,255,255,.38); }

@keyframes shanheHeroIn {
  from { opacity: 0; background-size: auto 108%; }
  to { opacity: 1; background-size: auto 100%; }
}
@keyframes shanheMist {
  from { transform: translate3d(-4vw, 0, 0) scale(.9); opacity: .22; }
  to { transform: translate3d(5vw, -3vh, 0) scale(1.15); opacity: .5; }
}
@keyframes shanheGrain {
  0% { transform: translate(0,0); }
  25% { transform: translate(-1%,1%); }
  50% { transform: translate(1%,-1%); }
  75% { transform: translate(.5%,1%); }
  100% { transform: translate(-.5%,-1%); }
}
@keyframes shanheRise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  #top_nav { display: none; }
  #header { height: 780px; min-height: 0; }
  .shanhe-grain { top: 0; height: 780px; min-height: 0; }
  #blogTitle { top: 38px; right: 24px; left: 24px; }
  #blogTitle h2 { display: none; }
  .shanhe-preface { top: 215px; right: 28px; left: 28px; }
  .shanhe-preface > span { display: none; }
  .shanhe-preface h2 { font-size: clamp(48px, 15vw, 72px); }
  .shanhe-preface-copy { font-size: 14px; }
  #navigator { right: 24px; bottom: 22px; left: 24px; overflow-x: auto; }
  #navList { gap: 22px; min-width: max-content; }
  .blogStats { display: none; }
  #main { width: calc(100% - 32px); padding: 72px 0 90px; grid-template-columns: 1fr; gap: 48px; }
  #sideBar { grid-row: 2; }
  .day { padding: 30px 24px; }
  #topics { padding: 34px 22px 50px; }
  #topics .postBody { font-size: 16px; }
  .shanhe-cinema { min-height: 540px; background-attachment: scroll; }
  .shanhe-cinema > div { padding: 100px 26px; }
  .shanhe-colophon { grid-template-columns: 1fr; }
  .shanhe-colophon strong, .shanhe-colophon > span { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}