/* ==========================================================================
   Custom typography layer
   - Serif (Times New Roman) reading stack, refined rhythm & heading hierarchy
   - Values tuned from ZhChHoooi.github.io and then tweaked:
     root 16px, body line-height 1.6, container max-width 1280px
   - Colors are intentionally left untouched (light theme preserved)
   ========================================================================== */

/* --reading-serif 源自 _sass/_themes.scss 的 $times-new-roman 变量 */
/* Root size mirrors the reference site (16px, one notch larger than 15).
   The theme's reset hardcodes 18px; this override (loaded after main.css)
   corrects it and keeps the em()-based sizing math consistent. */
html{ font-size: 16px; }

/* Reinforce the serif stack across the whole UI.
   Code / pre / keyboard are also switched to the reading serif per request;
   note that the reference site keeps these in monospace for readability. */
body,
h1, h2, h3, h4, h5, h6,
p, li, a, span, strong, em, small, blockquote,
.page__content,
.page__content p, .page__content li, .page__content ul, .page__content ol,
.author__name, .author__bio, .author__content,
.sidebar, .author__urls, .author__urls li, .author__urls a,
.masthead, .greedy-nav, .greedy-nav a, .masthead a,
.page__title, .page__meta,
.archive__item-title, .archive__item-excerpt,
.toc, .toc li, .notice, .btn,
table, th, td,
pre, code, kbd, samp, tt{
  font-family: var(--reading-serif) !important;
}

/* ---- Centered two-column layout (equal left/right gutters) ----
   #main is centered (equal L/R centering margins). The content fills the
   area to the right of the fixed sidebar, so the text column's right edge
   meets the same gutter as the sidebar's left edge -> symmetric, centered.
   - ~1440px laptop  -> #main ~1325px, sidebar flush-left, content flush-right
   - ~1920px monitor -> #main capped at 1600px, same symmetry */
@media (min-width: 1024px){
  /* The theme emits its right `suffix` as PADDING-right on .page (not a
     margin), which leaves a large right gutter and makes the page's outer
     left/right margins asymmetric. Zero it so the text column meets #main's
     right edge -> the same gutter the sidebar has on the left -> centered.
     Keep the left padding as the comfortable sidebar/text gutter. */
  .page{
    padding-right: 0 !important;
  }
}
@media (min-width: 1280px){
  .masthead__inner-wrap,
  .page__footer footer,
  #main{
    max-width: 1300px;
    width: 80%;
  }
}

/* ---- Reading comfort: slightly airier than the reference's 1.5 ---- */
body{ line-height: 1.6; }

.page__content{
  line-height: 1.6;
  font-size: 1.0em;
}
.page__content p{
  margin-bottom: 1.3em;
  line-height: 1.6;
}
.page__content li{
  margin-bottom: 0.4em;
  line-height: 1.6;
}

/* ---- Heading hierarchy: clearer jumps + breathing room ----
   (line-heights kept at the reference's 1.2) */
h1, .page__content h1, .page__title{ font-size: 2.05em; line-height: 1.2; margin-top: 1.4em; margin-bottom: 0.55em; font-weight: 700; }
h2, .page__content h2{ font-size: 1.55em; line-height: 1.2; margin-top: 1.6em; margin-bottom: 0.5em; font-weight: 700; }
h3, .page__content h3{ font-size: 1.28em; line-height: 1.2; margin-top: 1.3em; margin-bottom: 0.45em; font-weight: 700; }
h4, .page__content h4{ font-size: 1.12em; line-height: 1.2; margin-top: 1.1em; margin-bottom: 0.4em; font-weight: 700; }
h5, .page__content h5,
h6, .page__content h6{ font-size: 1.0em; line-height: 1.2; margin-top: 1em; margin-bottom: 0.35em; font-weight: 700; }

/* keep the very first heading on a page flush to the top */
.page__content > h1:first-child,
.page__title{ margin-top: 0; }

/* ---- Paper-like justified body text on wider screens ---- */
@media (min-width: 768px){
  .page__content p{
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}

/* ---- Blockquote: softer, more elegant ---- */
.page__content blockquote{
  border-left: 3px solid var(--global-border-color, #bdc1c4);
  padding-left: 1em;
  font-style: italic;
  color: var(--global-text-color-light, #9ba1a6);
}

/* ---- Sidebar / author card ---- */
.author__name{ font-size: 1.3em; letter-spacing: .3px; }
.author__bio{ line-height: 1.6; }
.author__urls li{ line-height: 1.6; }

/* ---- Top navigation: a touch larger, more refined ---- */
.greedy-nav a{ font-size: 1.05em; letter-spacing: .3px; }

/* ---- Archive / post list titles ---- */
.archive__item-title{ font-size: 1.3em; line-height: 1.25; }
.archive__item-excerpt{ line-height: 1.6; }

/* ---- Tables a bit more readable ---- */
.page__content table{ font-size: 0.98em; line-height: 1.6; }

/* ==========================================================================
   Project cards — Publications-style hover cards (image left, text right)
   Layout mirrors ZhChHoooi.github.io's .paper-box, recolored for this
   light theme. Drop a <div class="paper-box">…</div> block into any
   Markdown page (raw HTML passes through kramdown untouched).
   ========================================================================== */
.paper-box{
  display: flex;
  flex-direction: row;
  gap: 1.4rem;
  align-items: flex-start;
  margin: 1.5rem 0;
  padding: 1.2rem 1.3rem;
  background: #ffffff;
  border: 1px solid var(--global-border-color, #e3e3e3);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.paper-box:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.13);
}
.paper-box-image{
  flex: 0 0 44%;
  max-width: 44%;
}
.paper-box-image img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--global-border-color, #e3e3e3);
}
.badge{
  display: inline-block;
  margin: 0 0 0.6rem;
  padding: 2px 11px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  border-radius: 999px;
  color: #fff;
  background: var(--global-link-color, #2a6ebb);
}
.paper-box-text{
  flex: 1 1 auto;
  min-width: 0;
  color: var(--global-text-color);
}
.paper-box-text p{ margin: 0 0 0.6rem; }
.paper-box-text .paper-meta{
  color: var(--global-text-color-light, #6b7280);
  font-style: italic;
  margin-bottom: 0.7rem;
}
.paper-box-text ul{ margin: 0.4rem 0 0; padding-left: 1.2rem; }
.paper-box-text li{ margin-bottom: 0.45rem; line-height: 1.55; }
.paper-box-text a{ color: var(--global-link-color); font-weight: 600; }

/* Stack image above text on narrow screens */
@media (max-width: 768px){
  .paper-box{ flex-direction: column; }
  .paper-box-image{ flex-basis: auto; max-width: 100%; margin-bottom: 0.4rem; }
}

/* ---- Dark theme: card surface follows the toggle ----
   Uses the same theme variables the rest of the site switches on, so the
   card recolors automatically when <html data-theme="dark"> is toggled. */
html[data-theme="dark"] .paper-box{
  background: #1f2937;
  border-color: var(--global-border-color);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
html[data-theme="dark"] .paper-box:hover{
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
}
html[data-theme="dark"] .paper-box-image img{
  border-color: var(--global-border-color);
}
html[data-theme="dark"] .badge{
  color: #0b1220;
}