/* roulang page: index */
:root {
      --bg-page: #FAF8F5;
      --border-color: #E6E1D8;
      --text-main: #1A1613;
      --brand-red: #8C1D24;
    }
    body {
      background-color: var(--bg-page);
      color: var(--text-main);
      -webkit-font-smoothing: antialiased;
    }
    .serif-title {
      font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", SimSun, serif;
    }
    .thin-border-b {
      border-bottom: 1px solid var(--border-color);
    }
    .thin-border-t {
      border-top: 1px solid var(--border-color);
    }
    .thin-border-r {
      border-right: 1px solid var(--border-color);
    }
    .nav-link {
      position: relative;
      transition: color 0.2s ease;
    }
    .nav-link.active::after {
      content: '';
      position: absolute;
      bottom: -13px;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: var(--brand-red);
    }
    @media (max-width: 1024px) {
      .thin-border-r {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
      }
    }

/* roulang page: article */
:root {
      --bg-page: #FAF8F5;
      --border-color: #E6E1D8;
      --text-main: #1A1613;
      --brand-red: #8C1D24;
    }
    body {
      background-color: var(--bg-page);
      color: var(--text-main);
      -webkit-font-smoothing: antialiased;
    }
    .serif-title {
      font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", SimSun, serif;
    }
    .thin-border-b {
      border-bottom: 1px solid var(--border-color);
    }
    .thin-border-t {
      border-top: 1px solid var(--border-color);
    }
    .thin-border-r {
      border-right: 1px solid var(--border-color);
    }
    .thin-border-l {
      border-left: 1px solid var(--border-color);
    }
    .nav-link {
      position: relative;
      transition: color 0.2s ease;
    }
    .nav-link.active::after {
      content: '';
      position: absolute;
      bottom: -13px;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: var(--brand-red);
    }
    .article-content {
      line-height: 1.85;
      font-size: 16px;
      color: #2D2722;
    }
    .article-content p {
      margin-bottom: 1.5rem;
      text-align: justify;
    }
    .article-content h2 {
      font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", SimSun, serif;
      font-size: 1.4rem;
      font-weight: 700;
      color: #1A1613;
      margin-top: 2rem;
      margin-bottom: 1rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid var(--border-color);
    }
    .article-content h3 {
      font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", SimSun, serif;
      font-size: 1.2rem;
      font-weight: 600;
      color: #1A1613;
      margin-top: 1.5rem;
      margin-bottom: 0.75rem;
    }
    .article-content ul, .article-content ol {
      margin-bottom: 1.5rem;
      padding-left: 1.5rem;
    }
    .article-content li {
      margin-bottom: 0.5rem;
      list-style-type: square;
    }
    .article-content blockquote {
      border-left: 3px solid var(--brand-red);
      background: #F4EFEA;
      padding: 1rem 1.25rem;
      margin-bottom: 1.5rem;
      font-style: italic;
      color: #554D45;
    }
    @media (max-width: 1024px) {
      .thin-border-r {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
      }
    }

/* roulang page: category1 */
:root {
      --bg-page: #FAF8F5;
      --border-color: #E6E1D8;
      --text-main: #1A1613;
      --brand-red: #8C1D24;
    }
    body {
      background-color: var(--bg-page);
      color: var(--text-main);
      -webkit-font-smoothing: antialiased;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    }
    .serif-title {
      font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", SimSun, serif;
    }
    .thin-border-b {
      border-bottom: 1px solid var(--border-color);
    }
    .thin-border-t {
      border-top: 1px solid var(--border-color);
    }
    .thin-border-r {
      border-right: 1px solid var(--border-color);
    }
    .thin-border {
      border: 1px solid var(--border-color);
    }
    .nav-link {
      position: relative;
      transition: color 0.2s ease;
    }
    .nav-link.active::after {
      content: '';
      position: absolute;
      bottom: -13px;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: var(--brand-red);
    }
    .no-scrollbar::-webkit-scrollbar {
      display: none;
    }
    .no-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    @media (max-width: 1024px) {
      .thin-border-r {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
      }
    }