/* =========================================================================
   Custom theme overrides — "文艺清新" (literary & fresh)
   Loaded AFTER main.css via _includes/head/custom.html.
   To revert: delete this file + its <link> and the Google Fonts links in
   _includes/head/custom.html.
   ========================================================================= */

:root {
  --paper:      #fbfaf5;   /* warm paper background          */
  --paper-card: #f5f2e9;   /* slightly deeper card surface   */
  --ink:        #3b3833;   /* warm charcoal body text        */
  --ink-soft:   #6f695e;   /* muted / secondary text         */
  --sage:       #6f8c72;   /* primary accent (eucalyptus)    */
  --sage-deep:  #506a52;   /* links / hover, higher contrast */
  --sage-tint:  #eef2ea;   /* soft green wash                */
  --line:       #e7e1d2;   /* hairline borders / dividers    */
  --clay:       #b0876a;   /* warm secondary accent          */

  --serif: "EB Garamond", "Noto Serif SC", Georgia, "Songti SC", "Source Han Serif SC", "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}

/* ----------------------------------------------------------------- Base -- */
html { scroll-behavior: smooth; }

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--sage-tint); color: var(--ink); }

#main { background: transparent; }

.archive, .page__content { font-size: 1.04em; line-height: 1.85; }

/* --------------------------------------------------------------- Links -- */
.archive a, .page__content a {
  color: var(--sage-deep);
  text-decoration: none;
  background-image: linear-gradient(var(--sage), var(--sage));
  background-repeat: no-repeat;
  background-position: 0 1.05em;
  background-size: 0 1px;
  transition: background-size .28s ease, color .2s ease;
}
.archive a:hover, .page__content a:hover {
  color: var(--clay);
  background-size: 100% 1px;
}

/* ------------------------------------------------------------ Headings -- */
.archive h1, .archive h2, .archive h3, .archive h4,
.page__content h1, .page__content h2, .page__content h3,
.page__title, .author__name {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 500;
  letter-spacing: .2px;
}

.page__title {
  font-size: 1.9em;
  font-style: italic;
  font-weight: 500;
  text-align: center;
  color: var(--ink-soft);
  border-bottom: 0;
  margin: .2em 0 1.1em;
}

.archive h2, .page__content h2 {
  font-size: 1.65em;
  margin-top: 2.1em;
  padding-bottom: .28em;
  border-bottom: 1px solid var(--line);
}
.archive h2::before, .page__content h2::before {
  content: "\2767";          /* rotated floral heart fleuron */
  color: var(--sage);
  margin-right: .45em;
  font-size: .8em;
  vertical-align: 2px;
}

.archive h3, .page__content h3 {
  font-size: 1.3em;
  margin-top: 1.6em;
  color: var(--sage-deep);
}

.archive p { margin: 0 0 1.2em; }

/* soft, faded dividers */
.archive hr, .page__content hr {
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line) 20%, var(--line) 80%, transparent);
  margin: 2.6em 0;
}

/* -------------------------------------------------------------- Lists -- */
.archive ul li, .page__content ul li,
.archive ol li, .page__content ol li { margin-bottom: .65em; }
.archive ul > li::marker { color: var(--sage); }
/* News date labels (leading bold of each item) */
.archive ul li > strong:first-child { color: var(--sage-deep); }

/* --------------------------------------------------------- Blockquote -- */
.archive blockquote, .page__content blockquote {
  border-left: 3px solid var(--sage);
  background: var(--sage-tint);
  color: var(--ink-soft);
  font-style: italic;
  border-radius: 0 8px 8px 0;
  padding: .7em 1.2em;
}

/* --------------------------------------------------------- Masthead -- */
.masthead {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
.greedy-nav { background: transparent; }
.greedy-nav a {
  font-family: var(--sans);
  font-size: .92em;
  color: var(--ink-soft);
}
.greedy-nav a:hover { color: var(--sage-deep); }
.greedy-nav .visible-links a:before { background: var(--sage); }
.masthead__menu-item--lg a { color: var(--ink); font-weight: 600; }
.greedy-nav .hidden-links { background: var(--paper); border: 1px solid var(--line); }
.greedy-nav button { color: var(--sage-deep); }

/* ----------------------------------------------------- Author sidebar -- */
.author__avatar img {
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 6px 22px rgba(95, 85, 60, .18);
  max-width: 150px;
}
.author__name { font-weight: 600; }
.author__pronouns { color: var(--ink-soft); font-style: italic; }
.author__bio {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.7;
}
.author__bio2 { color: var(--ink-soft); font-size: .9em; line-height: 1.6; }
.author__urls a { font-family: var(--sans); }
.author__urls a:hover { color: var(--sage-deep); }
.author__urls-wrapper .btn--inverse {
  border-radius: 30px;
  border: 1px solid var(--sage);
  color: var(--sage-deep);
  background: transparent;
  font-family: var(--sans);
  transition: all .2s ease;
}
.author__urls-wrapper .btn--inverse:hover { background: var(--sage); color: #fff; }

/* -------------------------------------------------------------- Poems -- */
.poem-block {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.3em 1.8em 1.6em;
  margin: 1.3em 0;
  box-shadow: 0 3px 16px rgba(120, 110, 90, .07);
}
.poem-block h3 {
  text-align: center;
  font-style: italic;
  color: var(--sage-deep);
  margin-top: 0;
}
.poem-block pre {
  font-family: var(--serif) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  font-size: 1.05em;
  line-height: 1.95;
  text-align: center;
  white-space: pre-wrap;
  overflow: visible;
  padding: 0;
}

/* poem navigation buttons + counter */
#prev-btn, #next-btn {
  font-family: var(--sans);
  background: #fff;
  border: 1px solid var(--sage);
  color: var(--sage-deep);
  padding: .45em 1.3em;
  border-radius: 30px;
  cursor: pointer;
  transition: all .2s ease;
  margin: .2em .5em .2em 0;
}
#prev-btn:hover:not([disabled]), #next-btn:hover:not([disabled]) {
  background: var(--sage);
  color: #fff;
}
#prev-btn[disabled], #next-btn[disabled] { opacity: .4; cursor: default; }
#poem-counter { color: var(--ink-soft); font-style: italic; margin-top: .8em; }

/* ----------------------------------------------- Interactive demos -- */
.sisyphus-container {
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #fbfaf5, #f0ece1) !important;
  box-shadow: 0 4px 20px rgba(120, 110, 90, .10) !important;
}
.iron-house-container {
  border-radius: 14px !important;
  box-shadow: 0 6px 24px rgba(40, 40, 40, .25) !important;
}
.buttons button {
  font-family: var(--sans) !important;
  background: #fff !important;
  border: 1px solid var(--sage) !important;
  color: var(--sage-deep) !important;
  border-radius: 30px !important;
  padding: .5em 1.4em !important;
  margin: 0 .4em !important;
  transition: all .2s ease !important;
}
.buttons button:hover { background: var(--sage) !important; color: #fff !important; }
.result-message { color: var(--ink-soft); font-style: italic; }
.description { color: var(--ink-soft); }

/* -------------------------------------------------------------- Footer -- */
.page__footer {
  background: transparent;
  border-top: 0;                /* moved onto the inner footer (see below) */
  color: var(--ink-soft);
}
.page__footer footer {
  border-top: 1px solid var(--line);
  padding-top: 1.4em;
}
.page__footer a { color: var(--sage-deep); }
.page__footer-follow .social-icons a:hover { color: var(--sage-deep); }

/* On wide screens the author sidebar is position:fixed and follows the centered
   grid, so the full-width footer scrolls up underneath it. The exact sidebar
   edge isn't derivable in CSS, so a small script (see head/custom.html) measures
   the sidebar and sets --footer-offset; we shift the inner footer by it. The
   border-top above lives on this same shifted element, so it clears the sidebar
   too. Falls back to no offset (original behavior) if the script doesn't run. */
@media screen and (min-width: 1024px) {
  .page__footer footer {
    margin-left: var(--footer-offset, 0);
    max-width: none;
  }
}

/* ------------------------------------------------- Dark mode toggle -- */
.masthead__inner-wrap { position: relative; }

.theme-toggle {
  position: absolute;
  top: 50%;
  right: 4.6rem;                 /* sit just left of the greedy-nav menu button */
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--sage-deep);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  z-index: 30;
}
.theme-toggle:hover {
  background: var(--sage);
  border-color: var(--sage);
  color: #fff;
}
.theme-toggle:focus { outline: none; }
.theme-toggle:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }

/* Smooth, scoped transition when flipping themes (no-flash init prevents a
   load-time animation since the theme is set before first paint). */
body,
.masthead,
.page__footer,
.poem-block,
.sidebar,
.archive a,
.theme-toggle {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* =========================================================================
   Dark mode ("夜间模式")
   Activated by <html data-theme="dark"> (set before first paint by the inline
   script in head/custom.html, persisted in localStorage, defaulting to the OS
   preference). Most surfaces just inherit the re-defined variables below; the
   rest are theme/Custom defaults that hardcode light colors and are overridden
   explicitly. Warm charcoal paper + soft off-white ink keeps the literary feel.
   ========================================================================= */
html[data-theme="dark"] {
  color-scheme: dark;        /* darkens UA scrollbars, form widgets, autofill */

  --paper:      #211f1b;
  --paper-card: #2a2722;
  --ink:        #e8e2d4;
  --ink-soft:   #a89f8d;
  --sage:       #8fb093;
  --sage-deep:  #a6c4a8;
  --sage-tint:  #2b362c;
  --line:       #3c372e;
  --clay:       #c79d7d;

  background-color: #211f1b;  /* html element itself (theme hardcodes #fff) */
}

/* ---- generic surfaces the theme hardcodes outside our variables ---- */
html[data-theme="dark"] body { background-color: var(--paper); }
html[data-theme="dark"] a { color: var(--sage-deep); }
html[data-theme="dark"] u,
html[data-theme="dark"] ins { border-bottom-color: var(--ink); }
html[data-theme="dark"] abbr[title],
html[data-theme="dark"] abbr[data-original-title] { border-bottom-color: var(--ink-soft); }
html[data-theme="dark"] blockquote { border-left-color: var(--sage); }
html[data-theme="dark"] hr { border-top-color: var(--line); }
html[data-theme="dark"] figcaption { color: var(--ink-soft); }

/* inline code chips */
html[data-theme="dark"] code,
html[data-theme="dark"] p > code,
html[data-theme="dark"] li > code,
html[data-theme="dark"] a > code,
html[data-theme="dark"] td > code {
  background-color: #2a2723;
  border-color: var(--line);
  color: var(--ink);
}

/* ---- code blocks (Solarized light -> a warm dark) ---- */
html[data-theme="dark"] div.highlighter-rouge,
html[data-theme="dark"] figure.highlight {
  background-color: #232220;
  border-color: var(--line);
  color: #93a1a1;
}
html[data-theme="dark"] div.highlighter-rouge:before,
html[data-theme="dark"] figure.highlight:before { background-color: #32302b; }
html[data-theme="dark"] .highlight .c,
html[data-theme="dark"] .highlight .c1,
html[data-theme="dark"] .highlight .cm,
html[data-theme="dark"] .highlight .cd,
html[data-theme="dark"] .highlight .cs { color: #7c8a8a; }
html[data-theme="dark"] .highlight .k,
html[data-theme="dark"] .highlight .kn,
html[data-theme="dark"] .highlight .kp,
html[data-theme="dark"] .highlight .o,
html[data-theme="dark"] .highlight .ow { color: #a6c4a8; }
html[data-theme="dark"] .highlight .nf,
html[data-theme="dark"] .highlight .nc,
html[data-theme="dark"] .highlight .nt,
html[data-theme="dark"] .highlight .nv { color: #6fb6d8; }

/* ---- tables ---- */
html[data-theme="dark"] table { border-color: var(--line); }
html[data-theme="dark"] thead { background-color: var(--paper-card); }
html[data-theme="dark"] th,
html[data-theme="dark"] td,
html[data-theme="dark"] thead { border-color: var(--line); }
html[data-theme="dark"] tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.025); }

/* ---- forms / search ---- */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] #goog-wm-qt {
  background-color: var(--paper-card);
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"] input:hover,
html[data-theme="dark"] textarea:hover,
html[data-theme="dark"] select:hover,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus { border-color: var(--sage); }
html[data-theme="dark"] legend,
html[data-theme="dark"] label { color: var(--ink); }
html[data-theme="dark"] .help-block,
html[data-theme="dark"] .help-inline { color: var(--ink-soft); }

/* ---- notices ---- */
html[data-theme="dark"] .notice,
html[data-theme="dark"] .notice--primary,
html[data-theme="dark"] .notice--info,
html[data-theme="dark"] .notice--warning,
html[data-theme="dark"] .notice--success,
html[data-theme="dark"] .notice--danger {
  background-color: var(--paper-card);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .notice a { color: var(--sage-deep); }
html[data-theme="dark"] .notice code { background-color: rgba(0, 0, 0, 0.25); }

/* ---- buttons ---- */
html[data-theme="dark"] .btn { background-color: var(--sage); color: var(--paper); }
html[data-theme="dark"] .btn:hover { background-color: var(--sage-deep); color: var(--paper); }
html[data-theme="dark"] .btn--inverse {
  background-color: var(--paper-card);
  color: var(--ink);
  border-color: var(--line);
}

/* ---- pagination ---- */
html[data-theme="dark"] .pagination li a { color: var(--ink-soft); border-color: var(--line); }
html[data-theme="dark"] .pagination li a:hover { color: var(--sage); }
html[data-theme="dark"] .pagination li .current { background: var(--sage-deep); color: var(--paper); }

/* ---- masthead menu button + dropdowns + sidebar popover ---- */
html[data-theme="dark"] .greedy-nav button { background-color: transparent; }
html[data-theme="dark"] .navicon,
html[data-theme="dark"] .navicon:before,
html[data-theme="dark"] .navicon:after { background-color: var(--ink); }
html[data-theme="dark"] .greedy-nav .hidden-links { box-shadow: 0 0 12px rgba(0, 0, 0, 0.55); }
html[data-theme="dark"] .greedy-nav .hidden-links a:hover { background-color: var(--sage-tint); color: var(--sage); }
html[data-theme="dark"] .greedy-nav .hidden-links:after { border-color: var(--paper) transparent; }
html[data-theme="dark"] .author__urls {
  background-color: var(--paper-card);
  border-color: var(--line);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.55);
}
html[data-theme="dark"] .author__urls:after { border-color: var(--paper-card) transparent; }

/* ---- TOC / wells / modals ---- */
html[data-theme="dark"] .toc,
html[data-theme="dark"] .well,
html[data-theme="dark"] .modal { background-color: var(--paper-card); border-color: var(--line); }
html[data-theme="dark"] .toc .nav__title { background-color: var(--sage-deep); color: var(--paper); }

/* ---- muted text + dividers across page/archive ---- */
html[data-theme="dark"] .page__meta,
html[data-theme="dark"] .archive__subtitle,
html[data-theme="dark"] .footnote,
html[data-theme="dark"] .footnotes,
html[data-theme="dark"] a.reversefootnote { color: var(--ink-soft); }

/* ---- footer + social icons (theme leaves these raw grey / #000) ---- */
html[data-theme="dark"] .page__footer .fas,
html[data-theme="dark"] .page__footer .fab,
html[data-theme="dark"] .page__footer .far,
html[data-theme="dark"] .page__footer .fal,
html[data-theme="dark"] .social-icons .fa,
html[data-theme="dark"] .social-icons .fab,
html[data-theme="dark"] .social-icons .fas { color: var(--ink-soft); }

/* ---- Firefox text selection (theme sets white-on-black) ---- */
html[data-theme="dark"] ::-moz-selection { background: var(--sage-tint); color: var(--ink); }
html[data-theme="dark"] ::selection { background: var(--sage-tint); color: var(--ink); }

/* ---- custom-stylesheet surfaces that hardcoded light colors ---- */
html[data-theme="dark"] .author__avatar img {
  border-color: var(--paper-card);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] .author__urls-wrapper .btn--inverse:hover { color: var(--paper); }
html[data-theme="dark"] .poem-block { box-shadow: 0 3px 16px rgba(0, 0, 0, 0.35); }
html[data-theme="dark"] #prev-btn,
html[data-theme="dark"] #next-btn { background: transparent; }
html[data-theme="dark"] #prev-btn:hover:not([disabled]),
html[data-theme="dark"] #next-btn:hover:not([disabled]) { color: var(--paper); }

/* ---- home-page interactive widgets (custom.css used !important) ---- */
html[data-theme="dark"] .sisyphus-container {
  background: linear-gradient(180deg, var(--paper-card), var(--paper)) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}
html[data-theme="dark"] .sisyphus-slope path { stroke: #9a9384; }
html[data-theme="dark"] .stone { box-shadow: 0 0 6px rgba(0, 0, 0, 0.6); }
html[data-theme="dark"] .buttons button { background: transparent !important; }
html[data-theme="dark"] .buttons button:hover { color: var(--paper) !important; }

/* ----------------------------------------------- Xiaohongshu icon -- */
/* The RedNote (小红书) link uses the real red app icon (a self-coloured SVG),
   sized to sit inline with the Font Awesome glyphs in the author sidebar.
   The `.sidebar .xhs-icon` selector is needed to beat the theme's
   `.sidebar img { width: 100% }` (which styles the avatar). */
.xhs-icon {
  vertical-align: -0.22em;
  border-radius: 3px;
}
.sidebar .xhs-icon {
  width: 1.05em;
  height: 1.05em;
}