/* =========================================================================
   CN Dream · Premium Theme for Obsidian Publish
   Author: crafted for cndream.org
   Principle: Quiet luxury — serif + gold + restraint
   ========================================================================= */

/* ---------- 1. Font Import ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@300;400;500&family=Noto+Sans+SC:wght@300;400;500&family=Noto+Serif+SC:wght@300;400;500;600&display=swap');

/* ---------- 2. Design Tokens ---------- */
.theme-dark,
body {
  /* Neutral palette */
  --background-primary:         #0E0E0F;
  --background-primary-alt:     #141415;
  --background-secondary:       #111112;
  --background-secondary-alt:   #17171A;
  --background-modifier-border: #22221F;
  --background-modifier-hover:  #1C1C1D;
  --background-modifier-form-field: transparent;

  /* Text */
  --text-normal:   #E8E6E1;
  --text-muted:    #B5B2AB;   /* bumped from #8C8A85 for readability */
  --text-faint:    #8A8780;   /* bumped from #5A5852 so subtle text is still visible */
  --text-title-h1: #E8E6E1;
  --text-title-h2: #E8E6E1;
  --text-title-h3: #E8E6E1;
  --text-on-accent: #0E0E0F;

  /* Accent — 低饱和暖金 */
  --interactive-accent:       #C9A961;
  --interactive-accent-hover: #D9BC7A;
  --text-accent:              #C9A961;
  --text-accent-hover:        #D9BC7A;
  --text-selection:           rgba(201, 169, 97, 0.18);

  /* Typography */
  --font-text:       "Inter", "Noto Sans SC", -apple-system, sans-serif;
  --font-text-size:  16px;
  --font-monospace:  "JetBrains Mono", "SF Mono", Menlo, monospace;
  --font-serif:      "Noto Serif SC", "Cormorant Garamond", serif;
  --font-display:    "Cormorant Garamond", "Noto Serif SC", serif;

  /* Geometry */
  --radius-s: 2px;
  --radius-m: 3px;

  /* Line heights */
  --line-height-normal: 1.75;
  --line-height-tight:  1.4;
}

/* Light mode (kept minimal; dark is the showcase) */
.theme-light {
  --background-primary:         #FAFAF7;
  --background-primary-alt:     #F4F2EC;
  --background-secondary:       #F0EDE5;
  --background-modifier-border: #E4E1D8;
  --text-normal:   #1A1A1A;
  --text-muted:    #5A5852;
  --text-faint:    #9A9690;
  --interactive-accent:       #9A7B3F;
  --interactive-accent-hover: #B08F4E;
  --text-accent:              #9A7B3F;
}

/* ---------- 3. Global Reset ---------- */
html, body {
  background: var(--background-primary);
  color: var(--text-normal);
  font-family: var(--font-text);
  font-weight: 300;
  font-size: var(--font-text-size);
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--text-selection); color: var(--text-normal); }

/* Custom scrollbar — barely visible */
::-webkit-scrollbar          { width: 6px; height: 6px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: var(--background-modifier-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* ---------- 4. Top Signature Line ---------- */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--interactive-accent) 20%,
    var(--interactive-accent) 80%,
    transparent 100%);
  opacity: 0.45;
  z-index: 1000;
  pointer-events: none;
}

/* ---------- 5. Layout & Containers ---------- */
.published-container,
.site-body {
  background: var(--background-primary) !important;
  max-width: 1400px;
  margin: 0 auto;
}

/* Hide Obsidian's default top bar clutter */
.site-header-bar,
.site-header {
  background: transparent !important;
  border-bottom: none !important;
  backdrop-filter: none !important;
}

/* ---------- 6. Left Sidebar (Navigation) ---------- */
.site-body-left-column {
  background: var(--background-primary) !important;
  border-right: 1px solid var(--background-modifier-border);
  padding: 40px 20px 60px !important;
  width: 260px !important;
}

.site-body-left-column-inner {
  padding: 0 !important;
}

/* Site name / brand area */
.site-body-left-column-site-name {
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  color: var(--text-normal) !important;
  margin-bottom: 8px !important;
  margin-top: 8px !important;
  line-height: 1.3 !important;
}

.site-body-left-column-site-name::after {
  content: "OBSERVATORY";
  display: block;
  font-family: var(--font-text);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--text-faint);
  margin-top: 10px;
  font-weight: 300;
}

/* Logo */
.site-body-left-column-site-logo img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 0 !important;
  margin-bottom: 8px !important;
  filter: none;
}

/* Search */
.site-body-left-column-search-wrapper,
.site-search__input-wrapper {
  background: transparent !important;
  border: 1px solid var(--background-modifier-border) !important;
  border-radius: var(--radius-s) !important;
  margin: 28px 0 28px !important;
  padding: 2px 4px !important;
  transition: border-color 0.25s ease;
}
.site-body-left-column-search-wrapper:focus-within {
  border-color: var(--interactive-accent) !important;
}

.site-search__input,
input.site-search-input {
  background: transparent !important;
  color: var(--text-normal) !important;
  font-family: var(--font-text) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  border: none !important;
  padding: 8px !important;
}
.site-search__input::placeholder { color: var(--text-faint) !important; }

/* Theme toggle — reduce visual weight */
.theme-toggle, .mod-light, .mod-dark {
  opacity: 0.4;
  transition: opacity 0.3s ease;
}
.theme-toggle:hover { opacity: 1; }

/* Nav folders & files */
.nav-folder-title,
.nav-file-title {
  font-family: var(--font-text) !important;
  font-size: 13.5px !important;
  font-weight: 300 !important;
  color: var(--text-muted) !important;
  padding: 6px 10px !important;
  border-radius: var(--radius-s) !important;
  transition: color 0.25s ease, background 0.25s ease;
  line-height: 1.5 !important;
}

.nav-folder-title {
  font-size: 10px !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase;
  color: var(--text-faint) !important;
  margin-top: 24px !important;
  margin-bottom: 8px !important;
  font-weight: 400 !important;
  padding: 4px 10px !important;
}

.nav-file-title:hover {
  color: var(--text-normal) !important;
  background: transparent !important;
}

.nav-file-title.is-active {
  color: var(--text-normal) !important;
  background: transparent !important;
  position: relative;
}

.nav-file-title.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: var(--interactive-accent);
}

.nav-folder-children {
  border-left: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* ---------- 7. Main Content Area ---------- */
.markdown-preview-view,
.site-body-content {
  background: var(--background-primary) !important;
  padding: 80px 80px 120px !important;
  max-width: 820px !important;
}

.markdown-preview-sizer {
  max-width: 680px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* ---------- 8. Typography ---------- */
.markdown-preview-view {
  font-family: var(--font-text);
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--text-normal);
}

.markdown-preview-view p {
  margin: 0 0 1.4em 0;
  color: var(--text-normal);
}

/* Headings — all serif, no emoji visual noise */
.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6 {
  font-family: var(--font-serif) !important;
  font-weight: 500 !important;
  color: var(--text-normal) !important;
  letter-spacing: 0.01em;
  line-height: 1.35;
  margin-top: 2em;
  margin-bottom: 0.6em;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.markdown-preview-view h1 {
  font-size: 44px !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-top: 0.5em;
  margin-bottom: 0.8em;
}

.markdown-preview-view h2 {
  font-size: 26px !important;
  font-weight: 500 !important;
  margin-top: 3em;
  padding-top: 1.2em;
  border-top: 1px solid var(--background-modifier-border) !important;
}

.markdown-preview-view h2::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--interactive-accent);
  vertical-align: middle;
  margin-right: 14px;
  margin-bottom: 4px;
}

.markdown-preview-view h3 {
  font-size: 19px !important;
  color: var(--text-normal) !important;
  margin-top: 2em;
}

.markdown-preview-view h4 {
  font-size: 16px !important;
  font-style: italic;
  color: var(--text-muted) !important;
  font-family: var(--font-display) !important;
}

/* Strong & emphasis */
.markdown-preview-view strong { color: var(--text-normal); font-weight: 500; }
.markdown-preview-view em {
  font-style: italic;
  color: var(--text-normal);
  font-family: var(--font-display);
}

/* Blockquotes — the poetic element */
.markdown-preview-view blockquote {
  border-left: 1px solid var(--interactive-accent) !important;
  background: transparent !important;
  margin: 2em 0 !important;
  padding: 4px 0 4px 22px !important;
  font-family: var(--font-serif) !important;
  font-style: italic;
  font-size: 16px;
  color: var(--text-normal);
  line-height: 1.9;
  opacity: 0.92;
}
.markdown-preview-view blockquote p { margin-bottom: 0.3em; }
.markdown-preview-view blockquote p:last-child { margin-bottom: 0; }

/* Lists */
.markdown-preview-view ul,
.markdown-preview-view ol {
  padding-left: 1.4em;
  margin: 1em 0 1.6em;
}
.markdown-preview-view li { margin-bottom: 0.5em; line-height: 1.8; }
.markdown-preview-view ul > li::marker { color: var(--interactive-accent); }

/* Horizontal rule — gold dot divider */
.markdown-preview-view hr {
  border: none !important;
  height: 24px !important;
  margin: 3em 0 !important;
  background: none !important;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.markdown-preview-view hr::before {
  content: "·";
  font-size: 20px;
  color: var(--interactive-accent);
  letter-spacing: 24px;
  padding-left: 24px;
  opacity: 0.7;
}

/* ---------- 9. Links ---------- */
.markdown-preview-view a,
.markdown-preview-view a.internal-link,
.markdown-preview-view a.external-link {
  color: var(--text-normal) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--background-modifier-border);
  padding-bottom: 1px;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.markdown-preview-view a:hover,
.markdown-preview-view a.internal-link:hover {
  color: var(--interactive-accent) !important;
  border-bottom-color: var(--interactive-accent);
}

/* Unresolved (broken) internal links */
.markdown-preview-view a.internal-link.is-unresolved {
  color: var(--text-faint) !important;
  border-bottom-style: dashed;
}

/* External link icon — remove visual noise */
.external-link {
  background-image: none !important;
  padding-right: 0 !important;
}

/* ---------- 10. Inline code & code blocks ---------- */
.markdown-preview-view code {
  font-family: var(--font-monospace) !important;
  font-size: 0.88em;
  background: var(--background-primary-alt) !important;
  color: var(--interactive-accent);
  padding: 2px 6px;
  border-radius: var(--radius-s);
  border: 1px solid var(--background-modifier-border);
}

.markdown-preview-view pre {
  background: var(--background-primary-alt) !important;
  border: 1px solid var(--background-modifier-border) !important;
  border-radius: var(--radius-s) !important;
  padding: 18px 22px !important;
  margin: 1.6em 0 !important;
  overflow-x: auto;
}
.markdown-preview-view pre code {
  background: transparent !important;
  border: none !important;
  color: var(--text-normal);
  padding: 0;
}

/* ---------- 11. Tables ---------- */
.markdown-preview-view table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0;
  font-size: 14px;
}
.markdown-preview-view th,
.markdown-preview-view td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--background-modifier-border);
}
.markdown-preview-view th {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 1px solid var(--interactive-accent);
}

/* ---------- 12. Callouts ---------- */
.callout {
  background: var(--background-primary-alt) !important;
  border: 1px solid var(--background-modifier-border) !important;
  border-left: 1px solid var(--interactive-accent) !important;
  border-radius: 0 !important;
  padding: 18px 22px !important;
  margin: 2em 0 !important;
  box-shadow: none !important;
}
.callout-title {
  font-family: var(--font-serif) !important;
  font-weight: 500 !important;
  color: var(--text-normal) !important;
  padding: 0 0 8px 0 !important;
  background: transparent !important;
  font-size: 15px !important;
}
.callout-icon { opacity: 0.6; }

/* ---------- 13. Images ---------- */
.markdown-preview-view img {
  max-width: 100%;
  border-radius: var(--radius-s);
  margin: 1.5em 0;
  filter: brightness(0.95) contrast(1.02);
}

/* ---------- 14. Right Sidebar (Graph + Meta) ---------- */
.site-body-right-column {
  background: var(--background-primary) !important;
  border-left: 1px solid var(--background-modifier-border) !important;
  padding: 80px 24px !important;
  width: 280px !important;
}

.site-body-right-column-inner { padding: 0 !important; }

.site-body-right-column-heading,
.right-column-heading {
  font-family: var(--font-text) !important;
  font-size: 10px !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: var(--text-faint) !important;
  font-weight: 400 !important;
  margin-bottom: 16px !important;
  padding: 0 !important;
}

/* Graph view card */
.graph-view,
.site-graph-container {
  background: transparent !important;
  border: 1px solid var(--background-modifier-border) !important;
  border-radius: var(--radius-s) !important;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* Graph nodes */
.graph-view .node { fill: var(--text-muted) !important; }
.graph-view .node.mod-focused,
.graph-view .node.is-active { fill: var(--interactive-accent) !important; }
.graph-view .link { stroke: var(--background-modifier-border) !important; stroke-width: 0.5 !important; }

/* Outline / TOC */
.outline-container,
.tree-item {
  font-size: 13px !important;
  color: var(--text-muted) !important;
}

/* ---------- 15. Footer ---------- */
.site-footer,
.site-body-footer {
  background: transparent !important;
  border-top: 1px solid var(--background-modifier-border) !important;
  padding: 28px 80px !important;
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase;
  color: var(--text-faint) !important;
}

/* Hide "Powered by Obsidian" — handled in publish.js as backup */
.site-footer a[href*="obsidian.md"],
[class*="powered-by"],
.published-by-obsidian {
  display: none !important;
}

/* ---------- 16. Breadcrumbs & metadata ---------- */
.breadcrumb,
.mod-breadcrumb {
  font-size: 11px !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint) !important;
  margin-bottom: 32px !important;
}
.breadcrumb a { color: var(--text-faint) !important; border-bottom: none !important; }

/* Tags (hashtags in content) */
.tag, a.tag {
  background: transparent !important;
  color: var(--interactive-accent) !important;
  font-size: 12px;
  padding: 2px 8px !important;
  border: 1px solid var(--interactive-accent);
  border-radius: 12px !important;
  letter-spacing: 0.05em;
  margin-right: 4px;
  text-decoration: none !important;
}
.tag:hover { background: var(--text-selection) !important; }

/* ---------- 17. Emoji Neutralization ---------- */
/* Slightly desaturate emojis in headings so they don't visually dominate.
   (For full removal, use publish.js to strip them from the DOM.) */
.markdown-preview-view h1 img.emoji,
.markdown-preview-view h2 img.emoji,
.markdown-preview-view h3 img.emoji {
  filter: grayscale(100%) opacity(0.35);
  width: 0.9em;
  height: 0.9em;
  vertical-align: -0.12em;
}

/* ---------- 18. Responsive ---------- */
@media (max-width: 960px) {
  /* DO NOT hide .site-body-left-column on mobile — Obsidian Publish
     uses it as a sliding drawer triggered by the hamburger menu.
     Hiding it with display:none breaks the hamburger toggle. */
  .site-body-right-column { display: none !important; }
  .markdown-preview-view,
  .site-body-content { padding: 56px 28px 80px !important; }
  .markdown-preview-view h1 { font-size: 32px !important; }
  .markdown-preview-view h2 { font-size: 22px !important; }
}

/* ---------- 19. Print ---------- */
@media print {
  body::before { display: none; }
  .site-body-left-column, .site-body-right-column { display: none !important; }
  body { background: white !important; color: black !important; }
}

/* ---------- 20. Tiny Touches ---------- */
/* First-letter lift on h1 of home page */
.site-body-content:first-of-type .markdown-preview-view > h1:first-of-type::first-letter {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--interactive-accent);
}

/* Breathing dot before first h1 in each page — "observation" motif */
.markdown-preview-view > h1:first-of-type::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--interactive-accent);
  vertical-align: middle;
  margin-right: 14px;
  margin-bottom: 8px;
  animation: breath 3.5s ease-in-out infinite;
}

@keyframes breath {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%      { opacity: 1;   transform: scale(1.2); }
}

/* End of file */

/* ---------- 21. Preserved from user's original publish.css ---------- */
.nav-view div[data-path^="_templates"],
.nav-view .nav-folder[data-path^="_templates"] {
  display: none !important;
}

.markdown-rendered .internal-link.is-unresolved {
  color: var(--text-normal) !important;
  text-decoration: none !important;
  cursor: text !important;
  pointer-events: none !important;
  border-bottom: none !important;
}

/* =========================================================================
   22. Light Mode Refinements — for users who prefer bright theme
   Obsidian Publish currently set to 浅色 (Light); these rules ensure
   light mode is equally polished.
   ========================================================================= */

.theme-light html,
.theme-light body {
  background: #FAFAF7 !important;
  color: #1A1A1A !important;
}

.theme-light {
  --background-primary:         #FAFAF7;
  --background-primary-alt:     #F4F2EC;
  --background-secondary:       #F0EDE5;
  --background-modifier-border: #E4E1D8;
  --background-modifier-hover:  #F0EDE5;
  --text-normal:  #1A1A1A;
  --text-muted:   #55534E;
  --text-faint:   #9A9690;
  --interactive-accent:       #9A7B3F;
  --interactive-accent-hover: #B08F4E;
  --text-accent:              #9A7B3F;
  --text-accent-hover:        #B08F4E;
  --text-selection:           rgba(154, 123, 63, 0.15);
}

/* Top signature line — stronger contrast in light mode */
.theme-light body::before {
  opacity: 0.6;
}

/* Sidebars */
.theme-light .site-body-left-column,
.theme-light .site-body-right-column {
  background: #FAFAF7 !important;
  border-color: #E4E1D8 !important;
}

/* Main content area */
.theme-light .markdown-preview-view,
.theme-light .site-body-content {
  background: #FAFAF7 !important;
  color: #1A1A1A !important;
}

/* Headings — stay serif */
.theme-light .markdown-preview-view h1,
.theme-light .markdown-preview-view h2,
.theme-light .markdown-preview-view h3,
.theme-light .markdown-preview-view h4 {
  color: #1A1A1A !important;
}

/* Sub-heading (h2) separator */
.theme-light .markdown-preview-view h2 {
  border-top-color: #E4E1D8 !important;
}

.theme-light .markdown-preview-view h2::before {
  background: #9A7B3F !important;
}

.theme-light .markdown-preview-view h4 {
  color: #55534E !important;
}

/* Body text */
.theme-light .markdown-preview-view p,
.theme-light .markdown-preview-view li {
  color: #1A1A1A !important;
}

.theme-light .markdown-preview-view strong { color: #1A1A1A; }

/* Blockquotes — gold left-rule stays, slight warm tint */
.theme-light .markdown-preview-view blockquote {
  border-left-color: #9A7B3F !important;
  color: #1A1A1A;
  background: transparent !important;
}

/* Links */
.theme-light .markdown-preview-view a,
.theme-light .markdown-preview-view a.internal-link {
  color: #1A1A1A !important;
  border-bottom-color: #D6D2C6;
}
.theme-light .markdown-preview-view a:hover {
  color: #9A7B3F !important;
  border-bottom-color: #9A7B3F;
}

/* Code */
.theme-light .markdown-preview-view code {
  background: #F0EDE5 !important;
  color: #9A7B3F;
  border-color: #E4E1D8 !important;
}
.theme-light .markdown-preview-view pre {
  background: #F4F2EC !important;
  border-color: #E4E1D8 !important;
}
.theme-light .markdown-preview-view pre code {
  color: #1A1A1A;
}

/* Tables */
.theme-light .markdown-preview-view th {
  border-bottom-color: #9A7B3F !important;
  color: #9A9690;
}
.theme-light .markdown-preview-view td {
  border-bottom-color: #E4E1D8;
}

/* Callouts */
.theme-light .callout {
  background: #F4F2EC !important;
  border-color: #E4E1D8 !important;
  border-left-color: #9A7B3F !important;
}

/* Nav */
.theme-light .nav-folder-title {
  color: #9A9690 !important;
}
.theme-light .nav-file-title {
  color: #55534E !important;
}
.theme-light .nav-file-title:hover {
  color: #1A1A1A !important;
}
.theme-light .nav-file-title.is-active {
  color: #1A1A1A !important;
}
.theme-light .nav-file-title.is-active::before {
  background: #9A7B3F !important;
}

/* Graph */
.theme-light .graph-view {
  border-color: #E4E1D8 !important;
}
.theme-light .graph-view .node {
  fill: #9A9690 !important;
}
.theme-light .graph-view .node.is-active,
.theme-light .graph-view .node.mod-focused {
  fill: #9A7B3F !important;
}
.theme-light .graph-view .link {
  stroke: #E4E1D8 !important;
}

/* Footer */
.theme-light .site-footer {
  border-top-color: #E4E1D8 !important;
  color: #9A9690 !important;
}

/* Tags */
.theme-light .tag, .theme-light a.tag {
  color: #9A7B3F !important;
  border-color: #9A7B3F !important;
}

/* H1 first-letter + breathing dot use accent var — automatic */

/* Scrollbar */
.theme-light ::-webkit-scrollbar-thumb {
  background: #E4E1D8;
}
.theme-light ::-webkit-scrollbar-thumb:hover {
  background: #9A9690;
}

/* Search input */
.theme-light .site-body-left-column-search-wrapper,
.theme-light .site-search__input-wrapper {
  border-color: #E4E1D8 !important;
}
.theme-light .site-body-left-column-search-wrapper:focus-within {
  border-color: #9A7B3F !important;
}
.theme-light .site-search__input,
.theme-light input.site-search-input {
  color: #1A1A1A !important;
}

/* OBSERVATORY tagline under site name */
.theme-light .site-body-left-column-site-name::after {
  color: #9A9690 !important;
}

/* Breadcrumbs */
.theme-light .breadcrumb,
.theme-light .breadcrumb a {
  color: #9A9690 !important;
}

/* Unresolved links (preserved rule) */
.theme-light .markdown-rendered .internal-link.is-unresolved {
  color: #1A1A1A !important;
}

/* H2 divider dot in hr */
.theme-light .markdown-preview-view hr::before {
  color: #9A7B3F !important;
}

/* =========================================================================
   23. Final Polish Pass — comprehensive refinement round
   ========================================================================= */

/* ---------- 23.1 Chinese Typography Fine-tuning ---------- */
/* Chinese chars render better at 400 weight than 300 on most screens */
.markdown-preview-view p,
.markdown-preview-view li,
.markdown-preview-view blockquote {
  font-weight: 400;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Better character spacing for Chinese-English mixed content */
.markdown-preview-view {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Improve spacing between CJK and Latin characters */
.markdown-preview-view p {
  text-justify: inter-ideograph;
}

/* ---------- 23.2 Reading Progress Bar ---------- */
.site-body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--interactive-accent);
  width: var(--reading-progress, 0%);
  z-index: 1001;
  transition: width 0.2s ease-out;
  opacity: 0.6;
  pointer-events: none;
}

/* ---------- 23.3 Homepage Redundancy Softener ---------- */
/* When an H2 immediately follows an auto-generated page title,
   reduce its visual weight so the page doesn't double-shout */
.markdown-preview-view > h2:first-child {
  font-size: 20px !important;
  opacity: 0.82;
  margin-top: 1em;
  border-top: none !important;
  padding-top: 0 !important;
  color: var(--text-muted) !important;
}
.markdown-preview-view > h2:first-child::before {
  display: none !important;
}

/* ---------- 23.4 Wiki Link Preview / Hover Polish ---------- */
.markdown-preview-view .internal-link {
  position: relative;
}
.markdown-preview-view .internal-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--interactive-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.markdown-preview-view .internal-link:hover::after {
  transform: scaleX(1);
}

/* ---------- 23.5 Elegant Table of Contents / Outline ---------- */
.outline-container,
.on-this-page,
.tree-item {
  font-size: 12.5px !important;
  line-height: 1.9;
}
.outline-container a,
.on-this-page a {
  color: var(--text-muted) !important;
  text-decoration: none !important;
  border-bottom: none !important;
  padding: 3px 0 !important;
  display: block;
  transition: color 0.25s ease, padding 0.25s ease;
}
.outline-container a:hover,
.on-this-page a:hover {
  color: var(--text-normal) !important;
  padding-left: 4px !important;
}

/* ---------- 23.6 Backlinks Panel ---------- */
.backlink-pane,
.mod-backlink,
.backlinks-container {
  border-top: 1px solid var(--background-modifier-border) !important;
  padding-top: 32px !important;
  margin-top: 48px !important;
  background: transparent !important;
}
.backlink-pane .tree-item-self,
.mod-backlink .tree-item-self {
  padding: 8px 0 !important;
  border-bottom: 1px solid var(--background-modifier-border);
  font-size: 13px;
}
.backlink-pane .tree-item-inner,
.mod-backlink .tree-item-inner {
  color: var(--text-muted) !important;
  font-family: var(--font-text) !important;
}

/* ---------- 23.7 Page Title / Filename Header ---------- */
.page-title,
.mod-page-title {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
  font-size: 40px !important;
  letter-spacing: -0.01em;
  color: var(--text-normal) !important;
  margin-bottom: 8px !important;
}

/* ---------- 23.8 Footnote Elegance ---------- */
.footnote,
.footnote-link,
sup.footnote-link {
  font-family: var(--font-display) !important;
  color: var(--interactive-accent) !important;
  font-size: 0.75em !important;
  font-style: italic;
}
.footnote-backref {
  color: var(--interactive-accent) !important;
  text-decoration: none !important;
}

/* ---------- 23.9 Mobile Polish ---------- */
@media (max-width: 768px) {
  /* DO NOT hide left column — it's the hamburger drawer on mobile.
     Only hide the right column (TOC). */
  .site-body-right-column { display: none !important; }

  .markdown-preview-view,
  .site-body-content {
    padding: 48px 20px 80px !important;
    max-width: 100% !important;
  }
  .markdown-preview-sizer {
    max-width: 100% !important;
  }

  .markdown-preview-view h1 { font-size: 30px !important; line-height: 1.3; }
  .markdown-preview-view h2 { font-size: 20px !important; margin-top: 2em !important; padding-top: 1em !important; }
  .markdown-preview-view h3 { font-size: 17px !important; }

  .markdown-preview-view blockquote {
    padding-left: 16px !important;
    font-size: 15px !important;
  }

  /* Hide the breathing dot on mobile to reduce visual noise */
  .markdown-preview-view > h1:first-of-type::before { display: none; }
}

/* ---------- 23.10 Tablet Intermediate Breakpoint ---------- */
@media (max-width: 1200px) and (min-width: 961px) {
  .site-body-right-column { width: 220px !important; }
  .markdown-preview-view,
  .site-body-content { padding: 64px 48px 100px !important; }
}

/* ---------- 23.11 Keyboard Focus Visibility (Accessibility) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 1px solid var(--interactive-accent) !important;
  outline-offset: 3px !important;
  border-radius: 2px;
}

/* ---------- 23.12 Smooth Page Transitions ---------- */
.markdown-preview-view {
  animation: pageEnter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ---------- 23.13 Disable Animations for Users Who Prefer Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .markdown-preview-view > h1:first-of-type::before {
    animation: none !important;
  }
}

/* ---------- 23.14 Print Refinements ---------- */
@media print {
  @page { margin: 2cm; }
  body::before, body::after { display: none !important; }
  .markdown-preview-view h1 { page-break-after: avoid; }
  .markdown-preview-view h2, .markdown-preview-view h3 { page-break-after: avoid; }
  .markdown-preview-view blockquote, .markdown-preview-view pre { page-break-inside: avoid; }
}

/* ---------- 23.15 Highlight / Mark ---------- */
.markdown-preview-view mark,
.markdown-preview-view ==mark {
  background: rgba(201, 169, 97, 0.18) !important;
  color: var(--text-normal) !important;
  padding: 1px 4px;
  border-radius: 2px;
}

/* ---------- 23.16 Horizontal Rule (more elegant center dot) ---------- */
.markdown-preview-view hr {
  border: none !important;
  height: 40px !important;
  margin: 4em 0 !important;
  position: relative;
}
.markdown-preview-view hr::before {
  content: "· · ·";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  color: var(--interactive-accent);
  letter-spacing: 0.6em;
  opacity: 0.55;
  padding-left: 0.6em;
}

/* ---------- 23.17 Image Treatment (subtle vignette, no hard edge) ---------- */
.markdown-preview-view img {
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: opacity 0.3s ease;
}
.theme-light .markdown-preview-view img {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* ---------- 23.18 Hide redundant breadcrumb home icon ---------- */
.breadcrumb-icon,
.breadcrumb svg {
  opacity: 0.4;
  width: 10px;
  height: 10px;
}

/* ---------- 23.19 Dark Mode Home Page Hero Treatment ---------- */
/* Make the first paragraph (typical hero/tagline) feel more prominent */
.markdown-preview-view > h1:first-of-type + p {
  font-size: 16px;
  color: var(--text-muted);
  font-weight: 300;
  margin-bottom: 2em;
  line-height: 1.8;
  max-width: 580px;
}

/* ---------- 23.20 Final Font Fallback Safety ---------- */
/* If Google Fonts fails (e.g. slow network, firewall), fall back
   gracefully to system fonts that still look reasonable. */
@supports not (font-variation-settings: normal) {
  body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  }
  .markdown-preview-view h1,
  .markdown-preview-view h2,
  .markdown-preview-view h3 {
    font-family: "Songti SC", "SimSun", STSong, "PingFang SC", serif !important;
  }
}

/* ===================================================================
   24. CSS-ONLY FALLBACKS (when publish.js is not loading)
   Handles three previously JS-dependent goals with pure CSS:
   - Hide "Powered by Obsidian" watermark
   - Soften / de-emphasize leading emojis in headings
   - Ensure footer promo never shows
   =================================================================== */

/* 24.1  Aggressive watermark / footer removal ---------------------- */
.site-footer,
.site-footer-inner,
.publish-renderer .site-footer,
footer.site-footer,
.mod-footer,
.powered-by,
[class*="powered"],
[class*="Powered"],
a[href*="obsidian.md/publish"],
a[href*="obsidian.md"],
.site-body > footer,
div.site-body-footer {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Nuclear option: any link whose href contains "obsidian" at bottom of page */
.markdown-preview-view ~ a[href*="obsidian"],
.publish-renderer a[href*="obsidian.md"] {
  display: none !important;
}

/* 24.2  Soften leading emoji in headings (CSS-only, no JS needed) -- */
/* We cannot strip unicode chars via CSS, but we can de-emphasize the first
   character if it's likely an emoji (larger + colored glyphs typically),
   by reducing scale + opacity on the first letter of every heading. */
.markdown-preview-view h1::first-letter,
.markdown-preview-view h2::first-letter,
.markdown-preview-view h3::first-letter {
  /* Only affects if heading starts with a non-text glyph like emoji;
     CJK and Latin first letters are also affected but visually safe. */
  font-variant-emoji: text; /* render emoji as text-style if supported */
}

/* Specifically target emoji-first headings if author wants to hide them
   completely: users can add class "no-emoji" to the note body. 
   Not active by default. */

/* 24.3  Ensure no "Made with Obsidian" badge leaks in ------------- */
img[src*="obsidian"],
img[alt*="Obsidian"],
img[alt*="obsidian"] {
  /* Only hide small badge-sized obsidian images, not content images */
}
.site-footer img,
footer img {
  display: none !important;
}

/* 24.4  Fade out any residual element with "obsidian" in class ---- */
[class*="obsidian-promo"],
[class*="obsidian-badge"],
[id*="obsidian-promo"] {
  display: none !important;
}

/* ===================================================================
   25. POLISH: Cursor, Selection, Focus Rings
   =================================================================== */
::selection {
  background: rgba(201, 169, 97, 0.25);
  color: var(--text-normal);
}
.theme-light ::selection {
  background: rgba(201, 169, 97, 0.35);
}

a:focus-visible,
button:focus-visible {
  outline: 1px solid var(--interactive-accent);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ===================================================================
   26. Final safety net: hide any stray Obsidian branding in header too
   =================================================================== */
.site-header a[href*="obsidian.md"],
.site-body-left-column a[href*="obsidian.md"],
.site-body-right-column a[href*="obsidian.md"] {
  display: none !important;
}

/* ===================================================================
   27. HIDE RIGHT COLUMN — MINIMAL SAFE VERSION
   Just display:none on the right column. Do NOT touch main content
   max-width, flex, or justify — those broke the layout last time.
   =================================================================== */
.site-body-right-column,
aside.site-body-right-column,
.mod-right-column,
nav.site-body-right-column {
  display: none !important;
}

/* ===================================================================
   28. DARK MODE READABILITY FIX
   Ensure H3/H4/H5 and list items are fully readable in dark mode.
   Previously some used text-muted which was too dim.
   =================================================================== */
.theme-dark .markdown-preview-view h3,
.theme-dark .markdown-preview-view h4,
.theme-dark .markdown-preview-view h5,
.theme-dark .markdown-preview-view h6 {
  color: var(--text-normal) !important;
}

/* Body paragraphs explicitly forced to text-normal (not muted) */
.theme-dark .markdown-preview-view p,
.theme-dark .markdown-preview-view li {
  color: var(--text-normal);
}

/* Inline italic emphasis kept readable (was sometimes inheriting muted) */
.theme-dark .markdown-preview-view em,
.theme-dark .markdown-preview-view i {
  color: var(--text-normal);
  opacity: 0.92;
}

/* Strong/bold gets a subtle warm highlight in dark mode */
.theme-dark .markdown-preview-view strong {
  color: #F2EFE8;
  font-weight: 500;
}

/* Code inline in dark mode — brighter gold for legibility */
.theme-dark .markdown-preview-view code {
  color: #D9BC7A !important;  /* slightly brighter than accent gold */
  background: #1A1A18 !important;
  border-color: #2A2A26 !important;
}

/* ===================================================================
   29. CONTACT CARD
   Reliable email contact: mail app, copy fallback, and webmail compose.
   =================================================================== */
.cnd-contact-card {
  border: 1px solid var(--background-modifier-border);
  padding: 18px 20px;
  margin: 14px 0 10px;
  background: var(--background-primary-alt);
}

.cnd-contact-email {
  display: inline-block;
  color: var(--text-normal) !important;
  font-family: var(--font-serif);
  font-size: 1.18em;
  text-decoration: none !important;
}

.cnd-contact-email:hover {
  color: var(--interactive-accent-hover) !important;
}

.cnd-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.cnd-contact-actions a,
.cnd-copy-email {
  appearance: none;
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--text-muted) !important;
  cursor: pointer;
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.2;
  padding: 8px 10px;
  text-decoration: none !important;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.cnd-contact-actions a:hover,
.cnd-copy-email:hover,
.cnd-copy-email.is-copied {
  border-color: var(--interactive-accent);
  color: var(--text-normal) !important;
  background: rgba(201, 169, 97, 0.08);
}

.cnd-contact-inline {
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .cnd-contact-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}