/*!
 * BY Blog v1.7.0 (http://qiubaiying.github.io)
 * Copyright 2026 BY <qiubaiyingios@163.com>
 */

@media (min-width: 1200px) {
  .post-container,
  .sidebar-container {
    padding-right: 5%;
  }
}
@media (min-width: 768px) {
  .post-container {
    padding-right: 5%;
  }
}
.sidebar-container {
  color: var(--color-text-muted, #999999);
  font-size: 14px;
}
.sidebar-container h5 {
  color: var(--color-text-secondary, #6b6b6b);
  padding-bottom: 1em;
}
.sidebar-container h5 a {
  color: var(--color-text-secondary, #6b6b6b) !important;
  text-decoration: none;
}
.sidebar-container a {
  color: var(--color-text-muted, #999999) !important;
}
.sidebar-container a:hover,
.sidebar-container a:active {
  color: var(--color-brand-primary, #006d77) !important;
}
.sidebar-container .tags a {
  border-color: var(--color-text-muted, #999999);
}
.sidebar-container .tags a:hover,
.sidebar-container .tags a:active {
  border-color: var(--color-brand-primary, #006d77);
}
.sidebar-container .short-about img {
  width: 80%;
  display: block;
  border-radius: 4px;
  margin-bottom: 16px;
}
.sidebar-container .short-about p {
  margin-top: 0px;
  margin-bottom: 16px;
}
.sidebar-container .short-about .list-inline > li {
  padding-left: 0px;
}
.catalog-container {
  padding: 0px;
}
.side-catalog {
  display: block;
  overflow: auto;
  max-height: calc(100vh - 80px);
  padding-bottom: 40px;
  width: 195px;
}
.side-catalog.fixed {
  position: fixed;
  top: -21px;
}
.side-catalog.fold .catalog-toggle::before {
  content: "+";
}
.side-catalog.fold .catalog-body {
  display: none;
}
.side-catalog .catalog-toggle::before {
  content: "−";
  position: relative;
  margin-right: 5px;
  bottom: 1px;
}
.side-catalog .catalog-body {
  position: relative;
  list-style: none;
  height: auto;
  overflow: hidden;
  padding-left: 0px;
  padding-right: 5px;
  text-indent: 0;
}
.side-catalog .catalog-body li {
  position: relative;
  list-style: none;
}
.side-catalog .catalog-body li a {
  padding-left: 10px;
  max-width: 180px;
  display: inline-block;
  vertical-align: middle;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.side-catalog .catalog-body .h1_nav,
.side-catalog .catalog-body .h2_nav,
.side-catalog .catalog-body .h3_nav {
  margin-left: 0;
  font-size: 13px;
  font-weight: bold;
}
.side-catalog .catalog-body .h4_nav,
.side-catalog .catalog-body .h5_nav,
.side-catalog .catalog-body .h6_nav {
  margin-left: 10px;
  font-size: 12px;
}
.side-catalog .catalog-body .h4_nav a,
.side-catalog .catalog-body .h5_nav a,
.side-catalog .catalog-body .h6_nav a {
  max-width: 170px;
}
.side-catalog .catalog-body .active {
  border-radius: 4px;
  background-color: #ebebeb;
}
.side-catalog .catalog-body .active a {
  color: #006d77 !important;
}
@media (max-width: 1200px) {
  .side-catalog {
    display: none;
  }
}
body {
  /* Hux learn from
     *     TypeIsBeautiful,
     *     [This Post](http://zhuanlan.zhihu.com/ibuick/20186806) etc.
     */
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
  line-height: 1.7;
  font-size: 16px;
  color: var(--color-text-primary, #2d2d2d);
  background: var(--color-bg-primary, #f3f4f6);
  overflow-x: hidden;
}
p {
  margin: 32px 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  /* Hux learn from
     *     TypeIsBeautiful,
     *     [This Post](http://zhuanlan.zhihu.com/ibuick/20186806) etc.
     */
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
  line-height: 1.7;
  line-height: 1.1;
  font-weight: bold;
}
h4 {
  font-size: 21px;
}
a {
  color: var(--color-text-primary, #2d2d2d);
}
a:hover,
a:focus {
  color: var(--color-brand-primary, #006d77);
}
a img:hover,
a img:focus {
  cursor: zoom-in;
}
article {
  overflow-x: hidden;
}
blockquote {
  color: var(--color-text-secondary, #6b6b6b);
  font-style: normal;
  font-size: 0.95em;
  margin: 2rem 0;
  padding: 1.25rem 1.5rem 1.25rem 1.75rem;
  background: var(--color-bg-card, #fff);
  border-left: 3px solid var(--color-brand-accent, #D4A574);
  border-radius: 0 var(--radius-sm, .5rem) var(--radius-sm, .5rem) 0;
  position: relative;
  box-shadow: var(--shadow-sm);
}
blockquote p {
  margin: 0;
}
small.img-hint {
  display: block;
  margin-top: -20px;
  text-align: center;
}
br + small.img-hint {
  margin-top: -40px;
}
img.shadow {
  box-shadow: rgba(0, 0, 0, 0.258824) 0px 2px 5px 0px;
}
select {
  -webkit-appearance: none;
  margin-top: 16px;
  color: var(--color-brand-primary, #006d77);
  border-color: var(--color-brand-primary, #006d77);
  padding: 0em 0.4em;
  background: white;
}
select.sel-lang {
  min-height: 28px;
  font-size: 14px;
}
.table th,
.table td {
  border: none !important;
  border-bottom: 1px solid var(--color-border, #ebebeb) !important;
  padding: 8px 16px;
}
.table thead th {
  background: linear-gradient(135deg, var(--color-brand-primary, #006d77), #00484e);
  color: white;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: none !important;
}
.table tbody tr:nth-child(even) {
  background: var(--color-bg-primary, #f3f4f6);
}
.table tbody tr:hover {
  background: rgba(0, 109, 119, 0.06);
}
hr.small {
  max-width: 100px;
  margin: 16px auto;
  border-width: 4px;
  border-color: white;
}
pre,
code,
kbd,
samp {
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, 'Courier New', monospace;
}
pre code {
  display: block;
  width: auto;
  white-space: pre;
  word-wrap: normal;
  font-variant-ligatures: contextual;
}
pre,
.table-responsive {
  -webkit-overflow-scrolling: touch;
}
.postlist-container {
  margin-bottom: 15px;
}
.post-container a {
  color: var(--color-brand-primary, #006d77);
}
.post-container a:hover,
.post-container a:focus {
  color: var(--color-brand-accent, #d4a574);
}
.post-container h1,
.post-container h2,
.post-container h3,
.post-container h4,
.post-container h5,
.post-container h6 {
  margin: 32px 0 8px;
}
.post-container h5 {
  font-size: 19px;
  font-weight: 600;
  color: gray;
}
.post-container h5 + p {
  margin-top: 5px;
}
.post-container h6 {
  font-size: 16px;
  font-weight: 600;
  color: gray;
}
.post-container h6 + p {
  margin-top: 5px;
}
.post-container ul,
.post-container ol {
  margin-bottom: 32px;
}
@media screen and (max-width: 768px) {
  .post-container ul,
  .post-container ol {
    padding-left: 32px;
  }
}
@media screen and (max-width: 500px) {
  .post-container ul,
  .post-container ol {
    padding-left: 16px;
  }
}
.post-container ol ol,
.post-container ol ul,
.post-container ul ol,
.post-container ul ul {
  margin-bottom: 4px;
}
.post-container li p {
  margin: 0;
  margin-bottom: 4px;
}
.post-container li h1,
.post-container li h2,
.post-container li h3,
.post-container li h4,
.post-container li h5,
.post-container li h6 {
  line-height: 2;
  margin-top: 16px;
}
.post-container .pager li {
  width: 48%;
}
.post-container .pager li.next {
  float: right;
}
.post-container .pager li.previous {
  float: left;
}
.post-container .pager li > a {
  width: 100%;
}
.post-container .pager li > a > span {
  color: var(--color-text-muted, #999999);
  font-weight: normal;
  letter-spacing: 0.5px;
}
@media only screen and (max-width: 767px) {
  .navbar-default .navbar-collapse {
    position: absolute;
    right: 0;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    width: 170px;
  }
  /**
	 * Animation
	 * HuxBlog-Navbar using genuine Material Design Animation
	 */
  #huxblog_navbar {
    /**
		 * Sharable code and 'out' function
		 */
    opacity: 0;
    transform: scaleX(0);
    transform-origin: top right;
    transition: all 200ms cubic-bezier(0.47, 0, 0.4, 0.99) 0ms;
    -webkit-transform: scaleX(0);
    -webkit-transform-origin: top right;
    -webkit-transition: all 200ms cubic-bezier(0.47, 0, 0.4, 0.99) 0ms;
    /**
		 *'In' Animation
		 */
  }
  #huxblog_navbar a {
    font-size: 13px;
    line-height: 28px;
  }
  #huxblog_navbar .navbar-collapse {
    height: 0px;
    transform: scaleY(0);
    transform-origin: top right;
    transition: transform 400ms cubic-bezier(0.32, 1, 0.23, 1) 0ms;
    -webkit-transform: scaleY(0);
    -webkit-transform-origin: top right;
    -webkit-transition: -webkit-transform 400ms cubic-bezier(0.32, 1, 0.23, 1) 0ms;
  }
  #huxblog_navbar li {
    opacity: 0;
    transition: opacity 100ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    -webkit-transition: opacity 100ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  }
  #huxblog_navbar.in {
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
    opacity: 1;
    transition: all 250ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    -webkit-transition: all 250ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  }
  #huxblog_navbar.in .navbar-collapse {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-transition: -webkit-transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  #huxblog_navbar.in li {
    opacity: 1;
    transition: opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 205ms;
    -webkit-transition: opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 205ms;
  }
}
.navbar-custom {
  background: none;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3;
  /* Hux learn from
     *     TypeIsBeautiful,
     *     [This Post](http://zhuanlan.zhihu.com/ibuick/20186806) etc.
     */
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
  line-height: 1.7;
}
.navbar-custom .navbar-brand {
  font-weight: 800;
  color: white;
  height: 56px;
  line-height: 25px;
}
.navbar-custom .navbar-brand:hover {
  color: rgba(255, 255, 255, 0.8);
}
.navbar-custom .nav li a {
  text-transform: uppercase;
  font-size: 12px;
  line-height: 20px;
  font-weight: 800;
  letter-spacing: 1px;
}
.navbar-custom .nav li a:active {
  background: rgba(0, 0, 0, 0.12);
}
@media only screen and (min-width: 768px) {
  .navbar-custom {
    background: transparent;
    border-bottom: 1px solid transparent;
  }
  .navbar-custom body {
    font-size: 20px;
  }
  .navbar-custom .navbar-brand {
    color: white;
    padding: 20px;
    line-height: 20px;
  }
  .navbar-custom .navbar-brand:hover,
  .navbar-custom .navbar-brand:focus {
    color: rgba(255, 255, 255, 0.8);
  }
  .navbar-custom .nav li a {
    color: white;
    padding: 20px;
  }
  .navbar-custom .nav li a:hover,
  .navbar-custom .nav li a:focus {
    color: rgba(255, 255, 255, 0.8);
  }
  .navbar-custom .nav li a:active {
    background: none;
  }
}
@media only screen and (min-width: 1170px) {
  .navbar-custom {
    -webkit-transition: background-color 0.3s;
    -moz-transition: background-color 0.3s;
    transition: background-color 0.3s;
    /* Force Hardware Acceleration in WebKit */
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .navbar-custom.is-fixed {
    position: fixed;
    top: -61px;
    background-color: var(--nav-bg, rgba(255, 255, 255, 0.95));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--color-border, #ebebeb);
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
  }
  .navbar-custom.is-fixed .navbar-brand {
    color: var(--color-text-primary, #2d2d2d);
  }
  .navbar-custom.is-fixed .navbar-brand:hover,
  .navbar-custom.is-fixed .navbar-brand:focus {
    color: var(--color-brand-primary, #006d77);
  }
  .navbar-custom.is-fixed .nav li a {
    color: var(--color-text-primary, #2d2d2d);
  }
  .navbar-custom.is-fixed .nav li a:hover,
  .navbar-custom.is-fixed .nav li a:focus {
    color: var(--color-brand-primary, #006d77);
  }
  .navbar-custom.is-visible {
    /* if the user changes the scrolling direction, we show the header */
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.intro-header {
  background: no-repeat center center;
  background-color: var(--color-text-secondary, #6b6b6b);
  background-attachment: scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  margin-bottom: 0px;
}
@media only screen and (min-width: 768px) {
  .intro-header {
    margin-bottom: 16px;
  }
}
.intro-header .site-heading,
.intro-header .post-heading,
.intro-header .page-heading {
  padding: 64px 0 48px;
  color: white;
}
@media only screen and (min-width: 768px) {
  .intro-header .site-heading,
  .intro-header .post-heading,
  .intro-header .page-heading {
    padding: 64px 0;
  }
}
.intro-header .site-heading {
  padding: 64px 0 48px;
}
@media only screen and (min-width: 768px) {
  .intro-header .site-heading {
    padding: 64px 0;
  }
}
.intro-header .site-heading,
.intro-header .page-heading {
  text-align: center;
}
.intro-header .site-heading h1,
.intro-header .page-heading h1 {
  margin-top: 0;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.intro-header .site-heading .subheading,
.intro-header .page-heading .subheading {
  /* Hux learn from
     *     TypeIsBeautiful,
     *     [This Post](http://zhuanlan.zhihu.com/ibuick/20186806) etc.
     */
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
  line-height: 1.7;
  font-size: 16px;
  line-height: 1.5;
  display: block;
  font-weight: 400;
  margin: 8px 0 0;
  opacity: 0.85;
  letter-spacing: 0.5px;
}
@media only screen and (min-width: 768px) {
  .intro-header .site-heading h1,
  .intro-header .page-heading h1 {
    font-size: 52px;
  }
  .intro-header .site-heading .subheading,
  .intro-header .page-heading .subheading {
    font-size: 18px;
  }
}
.intro-header .post-heading h1 {
  font-size: 30px;
  margin-bottom: 24px;
}
.intro-header .post-heading .subheading,
.intro-header .post-heading .meta {
  line-height: 1.1;
  display: block;
}
.intro-header .post-heading .subheading {
  /* Hux learn from
     *     TypeIsBeautiful,
     *     [This Post](http://zhuanlan.zhihu.com/ibuick/20186806) etc.
     */
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
  line-height: 1.7;
  font-size: 17px;
  line-height: 1.4;
  font-weight: normal;
  margin: 10px 0 30px;
  margin-top: -5px;
}
.intro-header .post-heading .meta {
  font-family: 'Source Serif 4', 'Times New Roman', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 18px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5em;
}
.intro-header .post-heading .meta .meta-separator {
  opacity: .6;
}
.intro-header .post-heading .meta a {
  color: white;
}
@media only screen and (min-width: 768px) {
  .intro-header .post-heading h1 {
    font-size: 55px;
  }
  .intro-header .post-heading .subheading {
    font-size: 30px;
  }
  .intro-header .post-heading .meta {
    font-size: 20px;
  }
}
.post-preview {
  background: var(--color-bg-card, #ffffff);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--card-shadow, 0 1px 3px rgba(0, 0, 0, 0.08));
  border-left: 3px solid var(--color-brand-primary, #006d77);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.post-preview:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover, 0 4px 12px rgba(0, 0, 0, 0.1));
}
.post-preview > a {
  color: var(--color-text-primary, #2d2d2d);
  text-decoration: none;
}
.post-preview > a:hover,
.post-preview > a:focus {
  color: var(--color-brand-primary, #006d77);
  text-decoration: none;
}
.post-preview > a > .post-title {
  font-size: 21px;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 8px;
}
.post-preview > a > .post-subtitle {
  font-size: 15px;
  line-height: 1.3;
  margin: 0;
  font-weight: 300;
  margin-bottom: 8px;
  color: var(--color-text-secondary, #6b6b6b);
}
.post-preview > .post-meta {
  font-family: 'Source Serif 4', 'Times New Roman', serif;
  color: var(--color-text-muted, #999999);
  font-size: 14px;
  font-style: italic;
  margin-top: 4px;
}
.post-preview > .post-meta > a {
  text-decoration: none;
  color: var(--color-text-primary, #2d2d2d);
}
.post-preview > .post-meta > a:hover,
.post-preview > .post-meta > a:focus {
  color: var(--color-brand-primary, #006d77);
  text-decoration: underline;
}
@media only screen and (min-width: 768px) {
  .post-preview {
    padding: 32px;
    margin-bottom: 32px;
  }
  .post-preview > a > .post-title {
    font-size: 26px;
    line-height: 1.3;
    margin-bottom: 8px;
  }
  .post-preview > a > .post-subtitle {
    font-size: 16px;
  }
  .post-preview .post-meta {
    font-size: 15px;
  }
}
.post-preview + hr {
  display: none;
}
.post-content-preview {
  font-size: 13px;
  font-style: italic;
  color: var(--color-text-muted, #999999);
}
.post-content-preview:hover {
  color: var(--color-brand-accent, #d4a574);
}
@media only screen and (min-width: 768px) {
  .post-content-preview {
    font-size: 14px;
  }
}
.section-heading {
  font-size: 28px;
  margin-top: 48px;
  font-weight: 700;
}
.caption {
  text-align: center;
  font-size: 14px;
  padding: 8px;
  font-style: italic;
  margin: 0;
  display: block;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
footer {
  font-size: 20px;
  padding: 48px 0 64px;
}
footer .list-inline {
  margin: 0;
  padding: 0;
}
footer .copyright {
  font-size: 13px;
  text-align: center;
  margin-bottom: 0;
}
footer .copyright a {
  color: var(--color-brand-primary, #006d77);
}
footer .copyright a:hover,
footer .copyright a:focus {
  color: var(--color-brand-accent, #d4a574);
}
.floating-label-form-group {
  font-size: 14px;
  position: relative;
  margin-bottom: 0;
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--color-border, #ebebeb);
}
.floating-label-form-group input,
.floating-label-form-group textarea {
  z-index: 1;
  position: relative;
  padding-right: 0;
  padding-left: 0;
  border: none;
  border-radius: 0;
  font-size: 1.5em;
  background: none;
  box-shadow: none !important;
  resize: none;
}
.floating-label-form-group label {
  display: block;
  z-index: 0;
  position: relative;
  top: 2em;
  margin: 0;
  font-size: 0.85em;
  line-height: 1.764705882em;
  vertical-align: middle;
  vertical-align: baseline;
  opacity: 0;
  -webkit-transition: top 0.3s ease,opacity 0.3s ease;
  -moz-transition: top 0.3s ease,opacity 0.3s ease;
  -ms-transition: top 0.3s ease,opacity 0.3s ease;
  transition: top 0.3s ease,opacity 0.3s ease;
}
.floating-label-form-group::not(:first-child) {
  padding-left: 14px;
  border-left: 1px solid #eeeeee;
}
.floating-label-form-group-with-value label {
  top: 0;
  opacity: 1;
}
.floating-label-form-group-with-focus label {
  color: var(--color-brand-primary, #006d77);
}
form .row:first-child .floating-label-form-group {
  border-top: 1px solid var(--color-border, #ebebeb);
}
.btn {
  /* Hux learn from
     *     TypeIsBeautiful,
     *     [This Post](http://zhuanlan.zhihu.com/ibuick/20186806) etc.
     */
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
  line-height: 1.7;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  border-radius: 0;
  padding: 16px 24px;
}
.btn-lg {
  font-size: 16px;
  padding: 24px 32px;
}
.btn-default:hover,
.btn-default:focus {
  background-color: var(--color-brand-primary, #006d77);
  border: 1px solid var(--color-brand-primary, #006d77);
  color: white;
}
.pager {
  margin: 20px 0 0 !important;
  padding: 0px !important;
}
.pager li > a,
.pager li > span {
  /* Hux learn from
     *     TypeIsBeautiful,
     *     [This Post](http://zhuanlan.zhihu.com/ibuick/20186806) etc.
     */
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
  line-height: 1.7;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 8px 24px;
  background-color: var(--color-bg-card, #ffffff);
  border: 1px solid var(--color-border, #ebebeb);
  border-radius: 8px;
  transition: all 0.25s ease;
}
@media only screen and (min-width: 768px) {
  .pager li > a,
  .pager li > span {
    font-size: 13px;
    padding: 8px 32px;
  }
}
.pager li > a {
  color: var(--color-text-primary, #2d2d2d);
}
.pager li > a:hover,
.pager li > a:focus {
  color: white;
  background-color: var(--color-brand-primary, #006d77);
  border-color: var(--color-brand-primary, #006d77);
  box-shadow: var(--card-shadow-hover, 0 4px 12px rgba(0, 0, 0, 0.1));
  transform: translateY(-1px);
}
.pager li > a:hover > span,
.pager li > a:focus > span {
  color: white;
}
.pager .disabled > a,
.pager .disabled > a:hover,
.pager .disabled > a:focus,
.pager .disabled > span {
  color: var(--color-text-secondary, #6b6b6b);
  background-color: var(--color-bg-primary, #f3f4f6);
  cursor: not-allowed;
}
::-moz-selection {
  color: white;
  text-shadow: none;
  background: var(--color-brand-primary, #006d77);
}
::selection {
  color: white;
  text-shadow: none;
  background: var(--color-brand-primary, #006d77);
}
img::selection {
  color: white;
  background: transparent;
}
img::-moz-selection {
  color: white;
  background: transparent;
}
/* Hux add tags support */
.tags {
  margin-bottom: -5px;
}
.tags a,
.tags .tag {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 999em;
  padding: 0 8px;
  color: #ffffff;
  line-height: 24px;
  font-size: 12px;
  text-decoration: none;
  margin: 0 1px;
  margin-bottom: 4px;
}
.tags a:hover,
.tags .tag:hover,
.tags a:active,
.tags .tag:active {
  color: white;
  border-color: white;
  background-color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
}
@media only screen and (min-width: 768px) {
  .tags a,
  .tags .tag {
    margin-right: 4px;
  }
}
#tag-heading {
  padding: 48px 0 48px;
}
@media only screen and (min-width: 768px) {
  #tag-heading {
    padding: 48px 0;
  }
}
#tag_cloud {
  margin: 16px 0 16px 0;
}
#tag_cloud a,
#tag_cloud .tag {
  font-size: 13px;
  border: 1.5px solid var(--color-border, #ebebeb);
  border-radius: 4px;
  line-height: 28px;
  margin: 0 2px;
  margin-bottom: 8px;
  padding: 0 8px;
  background: transparent;
  color: var(--color-text-secondary, #6b6b6b) !important;
  text-decoration: none;
  transition: all 0.2s ease;
}
#tag_cloud a:hover,
#tag_cloud .tag:hover,
#tag_cloud a:active,
#tag_cloud .tag:active {
  background-color: var(--color-brand-primary, #006d77) !important;
  color: white !important;
  border-color: var(--color-brand-primary, #006d77);
}
@media only screen and (min-width: 768px) {
  #tag_cloud {
    margin-bottom: 24px;
  }
}
.tag-comments {
  font-size: 12px;
}
@media only screen and (min-width: 768px) {
  .tag-comments {
    font-size: 14px;
  }
}
.t:first-child {
  margin-top: 0px;
}
.listing-seperator {
  color: var(--color-brand-primary, #006d77);
  font-size: 21px !important;
}
.listing-seperator::before {
  margin-right: 4px;
}
@media only screen and (min-width: 768px) {
  .listing-seperator {
    font-size: 20px !important;
    line-height: 2 !important;
  }
}
.one-tag-list .tag-text {
  font-weight: 200;
  /* Hux learn from
     *     TypeIsBeautiful,
     *     [This Post](http://zhuanlan.zhihu.com/ibuick/20186806) etc.
     */
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
  line-height: 1.7;
}
.one-tag-list .post-preview {
  position: relative;
  background: var(--color-bg-card, #ffffff);
  border-radius: 8px;
  padding: 16px;
  border-left: 3px solid var(--color-brand-primary, #006d77);
  margin-bottom: 16px;
  box-shadow: var(--card-shadow, 0 1px 3px rgba(0, 0, 0, 0.08));
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.one-tag-list .post-preview:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover, 0 4px 12px rgba(0, 0, 0, 0.1));
}
.one-tag-list .post-preview > a .post-title {
  font-size: 16px;
  font-weight: 500;
  margin-top: 0;
}
.one-tag-list .post-preview > a .post-subtitle {
  font-size: 12px;
}
.one-tag-list .post-preview > .post-meta {
  position: absolute;
  right: 8px;
  bottom: 8px;
  margin: 0px;
  font-size: 12px;
  line-height: 12px;
}
@media only screen and (min-width: 768px) {
  .one-tag-list .post-preview {
    margin-left: 16px;
    padding: 24px;
  }
  .one-tag-list .post-preview > a > .post-title {
    font-size: 18px;
    line-height: 1.3;
  }
  .one-tag-list .post-preview > a > .post-subtitle {
    font-size: 14px;
  }
  .one-tag-list .post-preview .post-meta {
    font-size: 18px;
  }
}
/* Tags support End*/
/* Hux make all img responsible in post-container */
.post-container img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.5em auto 1.6em auto;
}
/* Hux Optimize UserExperience */
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
  background-color: inherit;
}
.navbar-default .navbar-toggle:active {
  background-color: rgba(255, 255, 255, 0.25);
}
/* Hux customize Style for navBar button */
.navbar-default .navbar-toggle {
  border-color: transparent;
  padding: 19px 16px;
  margin-top: 2px;
  margin-right: 2px;
  margin-bottom: 2px;
  border-radius: 50%;
}
.navbar-default .navbar-toggle .icon-bar {
  width: 18px;
  border-radius: 0px;
  background-color: white;
}
.navbar-default .navbar-toggle .icon-bar + .icon-bar {
  margin-top: 3px;
}
/* Hux customize Style for Duoshuo */
.comment {
  margin-top: 20px;
}
.comment #ds-thread #ds-reset a.ds-like-thread-button {
  border: 1px solid #ddd;
  border-radius: 0px;
  background: white;
  box-shadow: none;
  text-shadow: none;
}
.comment #ds-thread #ds-reset li.ds-tab a.ds-current {
  border: 1px solid #ddd;
  border-radius: 0px;
  background: white;
  box-shadow: none;
  text-shadow: none;
}
.comment #ds-thread #ds-reset .ds-textarea-wrapper {
  background: none;
}
.comment #ds-thread #ds-reset .ds-gradient-bg {
  background: none;
}
.comment #ds-thread #ds-reset .ds-post-options {
  border-bottom: 1px solid #ccc;
}
.comment #ds-thread #ds-reset .ds-post-button {
  border-bottom: 1px solid #ccc;
}
.comment #ds-thread #ds-reset .ds-post-button {
  background: white;
  box-shadow: none;
}
.comment #ds-thread #ds-reset .ds-post-button:hover {
  background: #eeeeee;
}
#ds-smilies-tooltip ul.ds-smilies-tabs li a {
  background: white !important;
}
.theme-toggle {
  cursor: pointer;
  font-size: 20px;
  transition: opacity 0.3s ease;
}
.theme-toggle:hover {
  opacity: 0.7;
}
.theme-toggle .theme-icon {
  display: inline-block;
  transition: transform 0.3s ease;
}
.theme-toggle:hover .theme-icon {
  transform: rotate(15deg);
}
.page-fullscreen .intro-header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.page-fullscreen #tag-heading {
  position: fixed;
  left: 0;
  top: 0;
  padding-bottom: 150px;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  display: -webkit-flex;
  -webkit-align-items: center;
  -webkit-justify-content: center;
  -webkit-flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.page-fullscreen footer {
  position: absolute;
  width: 100%;
  bottom: 0;
  padding-bottom: 20px;
  opacity: 0.6;
  color: #fff;
}
.page-fullscreen footer .copyright {
  color: #fff;
}
.page-fullscreen footer .copyright a {
  color: #fff;
}
.page-fullscreen footer .copyright a:hover {
  color: #ddd;
}
#reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--color-brand-primary, #006d77);
  z-index: 9999;
  transition: width 0.1s linear;
}
#back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 44px;
  height: 44px;
  background: var(--color-bg-card, #ffffff);
  color: var(--color-brand-primary, #006d77);
  border: 1px solid var(--color-border, #ebebeb);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  z-index: 9998;
  box-shadow: var(--card-shadow, 0 1px 3px rgba(0, 0, 0, 0.08));
}
#back-to-top:hover {
  background: var(--color-brand-primary, #006d77);
  color: white;
  border-color: var(--color-brand-primary, #006d77);
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover, 0 4px 12px rgba(0, 0, 0, 0.1));
}
#back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.code-block-wrapper {
  position: relative;
}
.code-block-wrapper .copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 8px;
  background: var(--color-bg-card, #ffffff);
  color: var(--color-text-muted, #999999);
  border: 1px solid var(--color-border, #ebebeb);
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  z-index: 2;
}
.code-block-wrapper .copy-btn:hover {
  color: var(--color-brand-primary, #006d77);
  border-color: var(--color-brand-primary, #006d77);
}
.code-block-wrapper .copy-btn.copied {
  color: #d4a574;
  border-color: #d4a574;
}
.code-block-wrapper:hover .copy-btn {
  opacity: 1;
}
.lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
  cursor: zoom-out;
}
.lightbox-overlay.active {
  opacity: 1;
  visibility: visible;
}
.lightbox-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  cursor: default;
}
.post-container img:not(.no-lightbox) {
  cursor: zoom-in;
  transition: opacity 0.2s ease;
}
.post-container img:not(.no-lightbox):hover {
  opacity: 0.92;
}
.sidebar-recent {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-recent li {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border, #ebebeb);
}
.sidebar-recent li:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.sidebar-recent li a {
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-text-secondary, #6b6b6b) !important;
  display: block;
  transition: color 0.2s ease;
}
.sidebar-recent li a:hover {
  color: var(--color-brand-primary, #006d77) !important;
}
.sidebar-recent li .post-date {
  font-size: 11px;
  color: var(--color-text-muted, #999999);
  margin-top: 2px;
}

/* ============================================
   Phase 4: Frontend Redesign
   ============================================ */

/* --- Featured Post Hero --- */
.featured-post {
  position: relative;
  border-radius: var(--radius-lg, 1rem);
  overflow: hidden;
  aspect-ratio: 21/9;
  background: center/cover no-repeat;
  margin-bottom: 2.5rem;
  min-height: 280px;
}
.featured-post__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.15) 50%, transparent 100%);
}
.featured-post__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem 2.5rem;
  color: #fff;
  z-index: 1;
}
.featured-post__tag {
  display: inline-block;
  padding: .25em .85em;
  background: var(--color-brand-accent, #D4A574);
  color: #fff;
  border-radius: 2em;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  margin-bottom: .75rem;
}
.featured-post__title {
  margin: 0 0 .5rem;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  line-height: 1.25;
  font-weight: 700;
}
.featured-post__title a {
  color: #fff !important;
  text-decoration: none;
  text-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.featured-post__title a:hover {
  color: var(--color-brand-accent, #E6C9A0) !important;
}
.featured-post__subtitle {
  margin: 0 0 .75rem;
  font-size: 1rem;
  opacity: .85;
  max-width: 60ch;
  line-height: 1.5;
}
.featured-post__meta {
  display: flex;
  gap: 1.25rem;
  font-size: .82rem;
  opacity: .7;
}
@media (max-width: 767px) {
  .featured-post {
    aspect-ratio: 16/9;
    min-height: 220px;
  }
  .featured-post__content {
    padding: 1.25rem 1.5rem;
  }
}

/* --- Post Cards Grid --- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 1.75rem;
  margin-bottom: 2.5rem;
}
.post-card {
  border-radius: var(--radius-md, .75rem);
  overflow: hidden;
  background: var(--color-bg-card, #fff);
  border: 1px solid var(--color-border, rgba(0,0,0,.08));
  box-shadow: var(--card-shadow);
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s cubic-bezier(.4,0,.2,1);
  opacity: 0;
  transform: translateY(24px);
}
.post-card.revealed {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .5s ease, transform .5s cubic-bezier(.4,0,.2,1), box-shadow .25s ease;
}
.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
}
.post-card.revealed:hover {
  transform: translateY(-4px);
}
.post-card__img-link {
  display: block;
}
.post-card__img {
  aspect-ratio: 16/9;
  background: center/cover no-repeat var(--color-bg-secondary, #e8e6dc);
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.post-card:hover .post-card__img {
  transform: scale(1.04);
}
.post-card__body {
  padding: 1.25rem 1.5rem 1.5rem;
}
.post-card__tag {
  display: inline-block;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-brand-accent, #D4A574);
  font-weight: 600;
  margin-bottom: .35rem;
}
.post-card__title {
  margin: .25rem 0 .5rem;
  font-size: 1.12rem;
  line-height: 1.4;
  font-weight: 600;
}
.post-card__title a {
  color: var(--color-text-primary, #2d2d2d);
  text-decoration: none;
}
.post-card__title a:hover {
  color: var(--color-brand-primary, #006d77);
}
.post-card__subtitle {
  font-size: .88rem;
  color: var(--color-text-secondary, #6b6b6b);
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card__meta {
  display: flex;
  gap: .5em;
  margin-top: .85rem;
  font-size: .78rem;
  color: var(--color-text-muted, #999999);
}

/* Staggered reveal delays */
.post-card:nth-child(1) { transition-delay: 0s; }
.post-card:nth-child(2) { transition-delay: .06s; }
.post-card:nth-child(3) { transition-delay: .12s; }
.post-card:nth-child(4) { transition-delay: .18s; }
.post-card:nth-child(5) { transition-delay: .24s; }
.post-card:nth-child(6) { transition-delay: .3s; }

/* --- Post Pager --- */
.post-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem 0 1rem;
}
.post-pager__btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .65em 1.5em;
  border-radius: var(--radius-md, .75rem);
  background: var(--color-bg-card, #fff);
  border: 1px solid var(--color-border, #ebebeb);
  color: var(--color-text-primary, #2d2d2d);
  font-size: .88rem;
  font-weight: 500;
  text-decoration: none;
  transition: all .2s ease;
}
.post-pager__btn:hover {
  background: var(--color-brand-primary, #006d77);
  color: #fff;
  border-color: var(--color-brand-primary, #006d77);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.post-pager__info {
  font-size: .82rem;
  color: var(--color-text-muted, #999);
  font-weight: 500;
}

/* --- Typography: Vertical Rhythm --- */
.post-content > * + * { margin-block-start: 1.5em; }
.post-content > h2 + * { margin-block-start: .75em; }
.post-content > * + h2 { margin-block-start: 2.5em; }
.post-content > * + h3 { margin-block-start: 2em; }
.post-content p { line-height: 1.85; }

/* --- Blockquote Decorative Quote --- */
blockquote::before {
  content: "\201C";
  position: absolute;
  top: -.15rem;
  left: .65rem;
  font-size: 2.75rem;
  color: var(--color-brand-accent, #D4A574);
  opacity: .35;
  font-family: Georgia, "Source Serif 4", serif;
  line-height: 1;
}

/* --- Table Enhancement --- */
.post-content table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--radius-sm, .5rem);
  overflow: hidden;
  border: 1px solid var(--color-border, #ebebeb);
  margin: 2rem 0;
  box-shadow: var(--shadow-sm);
}
.post-content th {
  background: var(--color-brand-primary, #006d77);
  color: #fff;
  text-align: left;
  padding: .75rem 1rem;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}
.post-content td {
  padding: .75rem 1rem;
  border-top: 1px solid var(--color-border, #ebebeb);
}
.post-content tr:nth-child(even) {
  background: rgba(0,109,119,.04);
}
[data-theme="dark"] .post-content tr:nth-child(even) {
  background: rgba(255,255,255,.03);
}

/* --- Inline Code Enhancement --- */
.post-content :not(pre) > code {
  background: rgba(0,109,119,.08);
  padding: .15em .4em;
  border-radius: .25rem;
  font-size: .88em;
  color: var(--color-brand-primary, #006d77);
}
[data-theme="dark"] .post-content :not(pre) > code {
  background: rgba(212,165,116,.12);
  color: var(--color-brand-accent, #E6C9A0);
}

/* --- Code Block Enhancement --- */
.post-content pre {
  border-radius: var(--radius-md, .75rem);
  border: 1px solid var(--color-border, #ebebeb);
  box-shadow: var(--shadow-sm);
}

/* --- Nav Scroll Enhancement --- */
.navbar-custom.is-scrolled {
  box-shadow: var(--shadow-sm);
}

/* --- Modern Footer --- */
.site-footer {
  background: var(--color-bg-card, #fff);
  border-top: 1px solid var(--color-border, #ebebeb);
  padding: var(--space-section, 3rem) 0 2rem;
  margin-top: var(--space-section, 3rem);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr; text-align: center; }
}
.footer-brand h4 {
  margin: 0 0 .5rem;
  color: var(--color-text-primary, #2d2d2d);
  font-size: 1.1rem;
}
.footer-tagline {
  color: var(--color-text-muted, #999);
  font-size: .88rem;
  margin: 0;
  line-height: 1.6;
}
.footer-section h5 {
  color: var(--color-text-secondary, #6b6b6b);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 1rem;
  font-weight: 600;
}
.footer-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-section li + li { margin-top: .5rem; }
.footer-section a {
  color: var(--color-text-muted, #999);
  font-size: .88rem;
  text-decoration: none;
  transition: color .2s;
}
.footer-section a:hover {
  color: var(--color-brand-primary, #006d77);
}
.footer-social-icons {
  display: flex;
  gap: .75rem;
}
@media (max-width: 768px) {
  .footer-social-icons { justify-content: center; }
}
.footer-social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-bg-primary, #f3f4f6);
  color: var(--color-text-secondary, #6b6b6b);
  font-size: 1rem;
  transition: all .2s ease;
}
.footer-social-icons a:hover {
  background: var(--color-brand-primary, #006d77);
  color: #fff;
  transform: translateY(-2px);
}
.footer-bottom {
  border-top: 1px solid var(--color-border, #ebebeb);
  padding-top: 1.25rem;
  font-size: .78rem;
  color: var(--color-text-muted, #999);
  text-align: center;
}

/* --- Tag Pills --- */
.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  padding: 1.5rem 0;
}
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .4em 1em;
  border-radius: 2em;
  border: 1px solid var(--color-border, #ebebeb);
  background: var(--color-bg-card, #fff);
  color: var(--color-text-primary, #2d2d2d);
  font-size: .85rem;
  text-decoration: none;
  transition: all .2s ease;
  cursor: pointer;
}
.tag-pill:hover, .tag-pill.active {
  background: var(--color-brand-primary, #006d77);
  color: #fff;
  border-color: var(--color-brand-primary, #006d77);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.tag-pill__count {
  font-size: .7rem;
  opacity: .6;
  background: rgba(0,0,0,.08);
  border-radius: 1em;
  padding: .1em .5em;
}
.tag-pill:hover .tag-pill__count,
.tag-pill.active .tag-pill__count {
  background: rgba(255,255,255,.2);
}

/* --- Side Catalog Enhancement --- */
.side-catalog {
  border-radius: var(--radius-md, .75rem);
  padding: 1rem 1rem 40px 1rem;
}
[data-theme="dark"] .side-catalog {
  background: rgba(22,33,62,.65);
}
.side-catalog .catalog-body .active {
  border-radius: 4px;
  background-color: var(--color-bg-primary, #f3f4f6);
  border-left: 2px solid var(--color-brand-accent, #D4A574);
}
.side-catalog .catalog-body .active a {
  color: var(--color-brand-primary, #006d77) !important;
  font-weight: 600;
  padding-left: 12px;
}

/* --- Post Hero Enhancement --- */
.intro-header {
  position: relative;
}
.intro-header .post-heading h1 {
  font-size: clamp(1.75rem, 5vw, 3rem);
  text-shadow: 0 2px 16px rgba(0,0,0,.3);
}

/* --- Tag Pill Small Variant --- */
.tag-pill--sm {
  font-size: .72rem;
  padding: .2em .7em;
}

/* --- View Transitions (Progressive Enhancement) --- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-fade-out .15s ease; }
::view-transition-new(root) { animation: vt-fade-in .2s ease; }
@keyframes vt-fade-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-fade-in { from { opacity: 0; transform: translateY(6px); } }

/* --- Reduced Motion Support --- */
@media (prefers-reduced-motion: reduce) {
  .post-card,
  .post-card.revealed,
  .featured-post__title a,
  .post-pager__btn,
  .tag-pill,
  .footer-social-icons a {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
  .post-card { opacity: 1; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* Fallback: show cards if JS doesn't load */
noscript + .post-grid .post-card,
.no-js .post-card {
  opacity: 1;
  transform: none;
}

/* ============================================
   Phase 5: Visual Polish & Micro-interactions
   ============================================ */

/* --- Typography: Font Hierarchy --- */
.post-heading h1,
.site-heading h1,
.featured-post__title {
  font-family: 'Source Serif 4', Georgia, serif;
}
.post-container blockquote p {
  font-family: 'Source Serif 4', Georgia, serif;
}
.post-meta,
.post-card__meta,
.featured-post__meta {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
}
.navbar-custom,
.tag-pill,
.footer-section {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* --- Post Heading Accent Decoration --- */
.post-container h2 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.65rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding-left: 1rem;
  border-left: 3px solid var(--color-brand-accent, #D4A574);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
.post-container h3 {
  font-family: 'Inter', sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-text-secondary, #6b6b6b);
  margin-top: 2rem;
}

/* --- Link Underline Animation --- */
.post-container a:not(.tag):not(.pager a):not(.anchor) {
  color: var(--color-brand-primary, #006d77);
  text-decoration: underline;
  text-decoration-color: rgba(0, 109, 119, 0.25);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
.post-container a:not(.tag):not(.pager a):not(.anchor):hover {
  color: var(--color-brand-accent, #D4A574);
  text-decoration-color: var(--color-brand-accent, #D4A574);
  text-decoration-thickness: 2px;
}

/* --- Image Presentation --- */
.post-container img:not(.no-lightbox) {
  border-radius: var(--radius-md, 0.75rem);
  box-shadow: var(--shadow-md);
}

/* Image Caption */
.post-container img + em,
.post-container small.img-hint {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--color-text-muted, #999);
}

/* --- Section Divider Headers (h5) --- */
.post-container h5 {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-brand-primary, #006d77);
  margin-top: 3rem;
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--color-border, #ebebeb);
  position: relative;
}
.post-container h5::before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--color-brand-accent, #D4A574);
}

/* --- Gold Accent: Progress Bar Gradient --- */
#reading-progress {
  background: linear-gradient(90deg,
    var(--color-brand-primary, #006d77) 0%,
    var(--color-brand-accent, #D4A574) 100%) !important;
}

/* --- Sidebar Section Decoration --- */
.sidebar-container h5::after {
  content: "";
  display: block;
  width: 2rem;
  height: 2px;
  background: var(--color-brand-accent, #D4A574);
  margin-top: 0.5rem;
}

/* --- Nav Link Underline Animation (Desktop) --- */
@media (min-width: 768px) {
  .navbar-custom .nav li a {
    position: relative;
  }
  .navbar-custom .nav li a::after {
    content: "";
    position: absolute;
    bottom: 15px;
    left: 20px;
    right: 20px;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .navbar-custom .nav li a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}

/* --- 404 Page Styling --- */
.error-page .error-code {
  display: block;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: clamp(6rem, 20vw, 12rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.95) 0%,
    rgba(212,165,116,0.8) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
  animation: error-float 6s ease-in-out infinite;
}
@keyframes error-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.error-page h1 {
  font-size: 2rem !important;
  font-weight: 400;
  opacity: 0.9;
  margin-bottom: 0.5rem;
}
.error-home-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
  padding: 0.85rem 1.75rem;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 2rem;
  color: white !important;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.25s ease;
}
.error-home-btn:hover {
  background: rgba(255,255,255,0.25);
  transform: translateX(4px);
  color: white !important;
}
.error-home-btn svg {
  transition: transform 0.25s ease;
}
.error-home-btn:hover svg {
  transform: translateX(4px);
}

/* --- Accessible Focus States --- */
a:focus-visible,
button:focus-visible,
.post-card:focus-visible,
.tag-pill:focus-visible {
  outline: 2px solid var(--color-brand-accent, #D4A574);
  outline-offset: 3px;
  border-radius: 4px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

/* --- Mobile Touch Targets --- */
@media (max-width: 767px) {
  .navbar-toggle {
    min-width: 48px;
    min-height: 48px;
  }
  #back-to-top {
    width: 48px;
    height: 48px;
  }
  .post-card__body {
    padding: 1rem 1.25rem 1.25rem;
  }
}

/* --- Stagger Timing Enhancement --- */
.post-card:nth-child(7) { transition-delay: .36s; }
.post-card:nth-child(8) { transition-delay: .42s; }
.post-card:nth-child(9) { transition-delay: .48s; }