/* emoeem / Butterfly design layer */
:root {
  --emo-accent: #2f6f6b;
  --emo-accent-strong: #245a56;
  --emo-ink: #20252b;
  --emo-muted: #69727d;
  --emo-line: rgba(32, 37, 43, .10);
  --emo-surface: rgba(255, 255, 255, .86);
  --emo-shadow: 0 14px 40px rgba(31, 35, 41, .08);
}

[data-theme='dark'] {
  --emo-accent: #79b8b2;
  --emo-accent-strong: #9ed0ca;
  --emo-ink: #e7e9eb;
  --emo-muted: #aab1b8;
  --emo-line: rgba(255, 255, 255, .10);
  --emo-surface: rgba(31, 35, 40, .84);
  --emo-shadow: 0 18px 46px rgba(0, 0, 0, .22);
}

/* Keep Butterfly's feature-rich layout, but give the site a quieter editorial identity. */
#page-header.full_page {
  min-height: 520px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #dfe8e5;
}

[data-theme='dark'] #page-header.full_page {
  background: radial-gradient(circle at 72% 28%, rgba(121,184,178,.17), transparent 34%),
              linear-gradient(135deg, #15191d 0%, #1d292a 55%, #20282c 100%) !important;
}

#site-info { max-width: 980px; padding: 0 28px; }
#site-title { letter-spacing: -.035em; font-weight: 760; }
#site-subtitle { max-width: 760px; margin: 18px auto 0; opacity: .88; }
#site_social_icons { margin-top: 22px; }

#page-header.not-home-page {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

#nav #blog_name { font-weight: 760; letter-spacing: -.02em; }
#nav .menus_items .menus_item:hover > a,
#nav .menus_items .menus_item > a:hover { color: var(--emo-accent) !important; }

#content-inner.layout { max-width: 1320px; }
#recent-posts .recent-post-item,
#aside-content .card-widget,
#page .card-widget {
  border: 1px solid var(--emo-line);
  box-shadow: var(--emo-shadow);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
#recent-posts .recent-post-item:hover,
#aside-content .card-widget:hover { transform: translateY(-3px); }

#recent-posts .article-title { font-weight: 720; letter-spacing: -.015em; }
#recent-posts .content { color: var(--emo-muted); line-height: 1.85; }
#recent-posts .article-meta-wrap { color: var(--emo-muted); }
#recent-posts .article-meta-wrap a:hover { color: var(--emo-accent); }

#post .post-copyright { border: 1px solid var(--emo-line); }
#post .post-content a,
#page .page-content a { color: var(--emo-accent); text-decoration-thickness: .08em; }
#post .post-content a:hover,
#page .page-content a:hover { color: var(--emo-accent-strong); }

#page .page-title { font-weight: 760; letter-spacing: -.025em; }
#page .page-content h2,
#page .page-content h3 { letter-spacing: -.02em; }

/* Project / Now / Uses / Timeline pages */
.emo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 26px 0; }
.emo-card { padding: 22px; border: 1px solid var(--emo-line); border-radius: 14px; background: var(--emo-surface); box-shadow: var(--emo-shadow); }
.emo-card h3 { margin: 0 0 8px; }
.emo-card p { margin: 8px 0; color: var(--emo-muted); line-height: 1.8; }
.emo-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.emo-chip { display: inline-flex; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--emo-line); font-size: .82em; color: var(--emo-muted); }
.emo-status { color: var(--emo-accent); font-weight: 650; }
.emo-kicker { color: var(--emo-accent); font-size: .82em; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.emo-list { padding-left: 1.2em; }
.emo-list li { margin: 8px 0; }

@media (prefers-reduced-motion: reduce) {
  #recent-posts .recent-post-item,
  #aside-content .card-widget { transition: none; }
}

.timeline-item { margin: 14px 0; padding: 16px 18px; border-left: 3px solid var(--emo-accent); border-top: 1px solid var(--emo-line); border-right: 1px solid var(--emo-line); border-bottom: 1px solid var(--emo-line); border-radius: 0 12px 12px 0; background: var(--emo-surface); box-shadow: var(--emo-shadow); line-height: 1.85; }
.timeline-item strong { color: var(--emo-ink); }

/* Home: turn the landing page into a small personal dashboard before the archive. */
.emo-home-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .36fr);
  gap: 24px;
  margin: 0 0 28px;
  padding: 28px 30px;
  border: 1px solid var(--emo-line);
  border-radius: 16px;
  background: var(--emo-surface);
  box-shadow: var(--emo-shadow);
}
.emo-home-intro h2 { margin: 8px 0; font-size: clamp(1.45rem, 2.4vw, 2rem); }
.emo-home-intro p { margin: 10px 0 0; color: var(--emo-muted); line-height: 1.85; }
.emo-home-intro__side { display: flex; flex-direction: column; justify-content: center; padding-left: 24px; border-left: 1px solid var(--emo-line); }
.emo-home-label { color: var(--emo-muted); font-size: .72em; font-weight: 750; letter-spacing: .12em; }
.emo-home-intro__side strong { margin: 8px 0 4px; color: var(--emo-ink); }
.emo-home-intro__side span:last-child { color: var(--emo-muted); font-size: .9em; }
.emo-home-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; }
.emo-home-links a { font-weight: 650; }

/* Project cards are intentionally denser than ordinary page cards. */
.emo-project-card { min-height: 240px; display: flex; flex-direction: column; }
.emo-project-card .emo-status { margin-top: auto; }
.emo-project-card h3 { font-size: 1.28rem; }

/* Embedded music stays responsive and is excluded from PJAX navigation. */
.emo-music-player { overflow: hidden; margin: 18px 0 12px; border: 1px solid var(--emo-line); border-radius: 16px; background: var(--card-bg); box-shadow: var(--emo-shadow); }
.emo-music-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 22px 24px 18px; border-bottom: 1px solid var(--emo-line); }
.emo-music-header h2 { margin: 4px 0 3px; font-size: 1.45rem; }
.emo-music-header p { margin: 0; color: var(--emo-muted); font-size: .88rem; }
.emo-music-header a { color: var(--emo-accent); font-weight: 650; white-space: nowrap; }
.emo-music-kicker { color: var(--emo-accent); font-size: .68rem; font-weight: 750; letter-spacing: .14em; }
.emo-music-aplayer { padding: 16px; background: var(--card-bg); }
.emo-music-aplayer .aplayer { margin: 0; border-radius: 12px; box-shadow: none; background: transparent; }
.emo-music-aplayer .aplayer .aplayer-info { border-bottom: 1px solid var(--emo-line); }
.emo-music-aplayer .aplayer .aplayer-list ol li { border-top-color: var(--emo-line); }
.emo-music-aplayer .aplayer .aplayer-list ol li.aplayer-list-light { background: color-mix(in srgb, var(--emo-accent) 10%, transparent); }
.emo-music-aplayer .aplayer .aplayer-lrc:before,
.emo-music-aplayer .aplayer .aplayer-lrc:after { display: none; }

/* Touch targets and reading width on small screens. */
@media (max-width: 768px) {
  .emo-home-intro { grid-template-columns: 1fr; gap: 18px; margin-bottom: 20px; padding: 20px; }
  .emo-home-intro__side { padding: 16px 0 0; border-top: 1px solid var(--emo-line); border-left: 0; }
  .emo-home-links a { padding: 5px 0; }
  .emo-project-card { min-height: 0; }
  .emo-music-header { align-items: flex-start; flex-direction: column; padding: 18px; }
  .emo-music-aplayer { padding: 10px; }
  #nav .site-page { padding-bottom: 8px; }
  #card-toc { right: 48px; bottom: 24px; width: min(calc(100vw - 72px), 380px); }
  #local-search .search-dialog { padding: 16px; }
  #local-search .search-result-list { padding-left: 16px; padding-right: 16px; }
}

.emo-widget-status p { margin: 8px 0; color: var(--emo-muted); line-height: 1.7; }
.emo-widget-status a, .emo-widget-links a { color: var(--emo-accent); font-weight: 650; }
.emo-widget-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 12px; }
.emo-widget-links a { padding: 6px 0; }


/* Reading progress + command palette */
#reading-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 9999; pointer-events: none; }
#reading-progress span { display: block; width: 0; height: 100%; background: var(--emo-accent); transition: width .08s linear; }
.emo-command-palette { position: fixed; inset: 0; z-index: 10000; display: none; align-items: flex-start; justify-content: center; padding: 12vh 1rem; }
.emo-command-palette.is-open { display: flex; }
.emo-command-palette__backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.5); backdrop-filter: blur(6px); }
.emo-command-palette__dialog { position: relative; width: min(680px,100%); padding: 14px; border: 1px solid var(--emo-line); border-radius: 16px; background: var(--emo-surface); box-shadow: 0 25px 80px rgba(0,0,0,.24); }
.emo-command-palette__input { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--emo-line); border-radius: 10px; background: transparent; color: var(--emo-ink); outline: none; }
.emo-command-palette__items { display: grid; gap: 3px; margin-top: 8px; }
.emo-command-palette__item { display: flex; justify-content: space-between; gap: 1rem; padding: 10px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--emo-ink); text-align: left; cursor: pointer; }
.emo-command-palette__item:hover, .emo-command-palette__item.is-selected { background: color-mix(in srgb, var(--emo-accent) 12%, transparent); }
.emo-command-palette__item span { opacity: .55; }
.emo-command-palette__hint { margin: 8px 2px 0; font-size: .75rem; color: var(--emo-muted); }
.emo-article-context { margin: 0 auto 22px; padding: 14px 18px; border: 1px solid var(--emo-line); border-radius: 14px; background: var(--emo-surface); }
.emo-article-context__meta { display: flex; flex-wrap: wrap; gap: 7px; }
.emo-article-context__badge { display: inline-flex; padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--emo-accent) 10%, transparent); color: var(--emo-accent-strong); font-size: .8rem; }
.emo-article-context__env { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.emo-article-context__env span { padding: 4px 8px; border-radius: 7px; background: color-mix(in srgb, var(--emo-accent) 6%, transparent); font-size: .78rem; }
@media (max-width: 768px) { .emo-command-palette { padding: 7vh .65rem; } #page-header.full_page { min-height: 470px; } .emo-article-context { padding: 12px 14px; } }
@media (prefers-reduced-motion: reduce) { #reading-progress span { transition: none; } }

.emo-code-copy { position: absolute; top: 8px; right: 8px; z-index: 2; padding: 4px 8px; border: 0; border-radius: 7px; background: rgba(0,0,0,.45); color: #fff; font-size: .72rem; cursor: pointer; opacity: 0; transition: opacity .15s ease; }
#article-container pre { position: relative; overflow: auto; max-width: 100%; }
#article-container pre:hover .emo-code-copy, #article-container pre:focus-within .emo-code-copy { opacity: 1; }
@media (max-width: 768px) { .emo-code-copy { opacity: 1; } }

/* Refined landing hero: keep the editorial banner visible in both themes. */
#page-header.full_page {
  min-height: 510px;
  background-image: linear-gradient(180deg, rgba(247,245,240,.06), rgba(32,37,43,.16)), url('/img/site-banner.svg') !important;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #dfe8e5;
}

[data-theme='dark'] #page-header.full_page {
  background-image: linear-gradient(180deg, rgba(15,23,42,.18), rgba(15,23,42,.42)), url('/img/site-banner.svg') !important;
  background-color: #c8d8d3;
}

#site-info {
  max-width: 920px;
  padding: 0 28px;
  text-shadow: 0 2px 18px rgba(0,0,0,.18);
}

#site-title {
  font-size: clamp(3rem, 7vw, 5.4rem);
  letter-spacing: -.045em;
  font-weight: 800;
}

#site-subtitle {
  max-width: 720px;
  margin: 16px auto 0;
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  line-height: 1.8;
  opacity: .94;
}

#site_social_icons {
  margin-top: 22px;
}

#scroll-down {
  opacity: .78;
}

.emo-category-grid .emo-card {
  min-height: 180px;
  display: flex;
  flex-direction: column;
}

.emo-category-grid .emo-status {
  margin-top: auto;
}

.emo-category-grid h3 a {
  color: var(--emo-ink);
  text-decoration: none;
}

.emo-category-grid h3 a:hover {
  color: var(--emo-accent);
}

@media (max-width: 768px) {
  #page-header.full_page {
    min-height: 430px;
    background-position: 58% center;
  }

  #site-info {
    padding: 0 18px;
  }

  #site-title {
    font-size: clamp(2.5rem, 13vw, 4rem);
  }

  #site-subtitle {
    font-size: 1rem;
    line-height: 1.7;
  }
}

/* Homepage identity -> evidence -> writing flow, inspired by personal-homepage-skill. */
.emo-home-experience { margin: 0 0 34px; }
.emo-home-section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 34px 0 16px; }
.emo-home-section-head h2 { margin: 5px 0 0; font-size: clamp(1.35rem, 2.5vw, 1.9rem); letter-spacing: -.025em; }
.emo-home-section-head > a { color: var(--emo-accent); font-weight: 650; white-space: nowrap; }
.emo-home-projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.emo-home-project { min-height: 220px; text-decoration: none !important; color: inherit !important; }
.emo-home-project h3 { margin-top: 8px; }
.emo-home-project p { margin-bottom: 12px; }
.emo-home-project .emo-status { display: block; margin-top: auto; }
.emo-reveal { opacity: 0; transform: translateY(10px); transition: opacity .35s ease var(--emo-reveal-delay, 0ms), transform .35s ease var(--emo-reveal-delay, 0ms); }
.emo-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (max-width: 1024px) { .emo-home-projects { grid-template-columns: 1fr; } .emo-home-project { min-height: 0; } }
@media (max-width: 768px) { .emo-home-section-head { align-items: flex-start; flex-direction: column; gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .emo-reveal { opacity: 1; transform: none; transition: none; } }

/* Final responsive QA overrides: keep the homepage editorial and mobile-first. */
#page-header.full_page {
  height: 520px !important;
  min-height: 520px;
}

@media (max-width: 1024px) {
  #page-header.full_page {
    height: 390px !important;
    min-height: 390px;
  }
}

@media (max-width: 768px) {
  #page-header.full_page {
    height: 390px !important;
    min-height: 390px;
  }
  #page-header.full_page + main#content-inner #aside-content { display: none; }
  #page-header.full_page + main#content-inner #recent-posts { width: 100%; }
  .emo-home-intro { grid-template-columns: 1fr; padding: 22px 20px; gap: 18px; }
  .emo-home-intro__side { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--emo-line); }
  .emo-home-project { min-height: 0; }
}