:root {
  --sl-bg: #0b1110;
  --sl-surface: #111c1a;
  --sl-surface-2: #162521;
  --sl-text: #eef7f2;
  --sl-muted: #a6bbb3;
  --sl-line: rgba(238, 247, 242, .14);
  --sl-accent: #8ee8c7;
  --sl-gold: #d7b56d;
}

html, body { background: var(--sl-bg); }
body {
  color: var(--sl-text);
  font-family: "Manrope", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.85;
}
body, button, input, select, textarea { font-family: inherit; }
a { color: var(--sl-accent); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--sl-gold); }

.site-header, .main-navigation, .site-footer { display: none; }
.sl-blog-header {
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1rem 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  border-bottom: 1px solid var(--sl-line);
}
.sl-blog-brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--sl-text); font-weight: 800; text-decoration: none; letter-spacing: -.02em; }
.sl-blog-brand img { width: 2.55rem; height: 2.55rem; border-radius: .85rem; }
.sl-blog-nav { display: flex; align-items: center; flex-wrap: nowrap; gap: 1rem; font-size: .95rem; }
@media (min-width: 761px) {
  .sl-blog-nav { justify-self: center; }
}
.sl-blog-nav a { color: var(--sl-muted); text-decoration: none; }
.sl-blog-nav a:hover, .sl-blog-nav a[aria-current="page"] { color: var(--sl-text); }

.site.grid-container, .container.grid-container, .inside-article, .comments-area, .paging-navigation, .page-header {
  background: transparent !important;
}
.site-content { width: min(1120px, calc(100% - 2rem)); margin: 0 auto; padding: 3rem 0; }
.content-area, .site-main { width: 100%; }
.inside-article, .page-header {
  border: 1px solid var(--sl-line);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(17,28,26,.92), rgba(11,17,16,.94)) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .24);
}
.inside-article { padding: clamp(1.2rem, 4vw, 3.2rem) !important; }
.blog .inside-article, .archive .inside-article { margin-bottom: 1.4rem; }
.single .inside-article { max-width: 820px; margin-inline: auto; }

.entry-title, .page-title { color: var(--sl-text); font-weight: 800; line-height: 1.18; letter-spacing: -.025em; }
:lang(zh-Hant) .entry-title, :lang(zh-Hant) .page-title { line-height: 1.36; letter-spacing: .005em; font-weight: 700; }
.entry-title a { color: var(--sl-text); text-decoration: none; }
.entry-title a:hover { color: var(--sl-accent); }
.entry-meta, .entry-meta a, .cat-links, .tags-links, .byline, .posted-on { color: var(--sl-muted); font-size: .9rem; }
.entry-summary, .entry-content { color: var(--sl-text); }
.entry-content { max-width: 760px; margin-inline: auto; }
.entry-content p { margin-bottom: 1.25em; }
.entry-content h2 { margin-top: 2.2em; color: var(--sl-text); font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.3; }
.entry-content h3 { margin-top: 1.7em; color: var(--sl-text); font-size: 1.18rem; }
.entry-content blockquote {
  border-left: 4px solid var(--sl-accent);
  color: var(--sl-muted);
  background: rgba(142, 232, 199, .07);
  border-radius: 0 16px 16px 0;
  padding: 1rem 1.2rem;
}
.entry-content ul, .entry-content ol { margin-left: 1.2rem; }
.entry-content img { border-radius: 20px; border: 1px solid var(--sl-line); }
.entry-content pre, .entry-content code { white-space: pre-wrap; border-radius: 14px; }
.read-more, .button, button, input[type="submit"] {
  border-radius: 999px !important;
  background: var(--sl-accent) !important;
  color: #0b1110 !important;
  font-weight: 800;
}
.nav-links a, .page-numbers { color: var(--sl-muted); }

.sl-blog-footer {
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 2rem 0 3rem;
  border-top: 1px solid var(--sl-line);
  color: var(--sl-muted);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.sl-blog-footer strong { color: var(--sl-text); }
.sl-blog-footer p { margin: .25rem 0 0; }
.sl-blog-footer-links { display: flex; gap: 1rem; flex-wrap: wrap; }
.sl-blog-footer-links a { color: var(--sl-muted); text-decoration: none; }
.sl-blog-footer-links a:hover { color: var(--sl-text); }

@media (max-width: 760px) {
  body { font-size: 17px; line-height: 1.9; }
  .sl-blog-header { grid-template-columns: 1fr; }
  .sl-blog-nav { justify-self: start; gap: .75rem; }
  .site-content { padding: 1.6rem 0; }
  .inside-article { border-radius: 22px; }
  .sl-blog-footer { flex-direction: column; }
}

html[data-theme="day"] {
  --sl-bg: #f6f1e7;
  --sl-surface: #fff9ee;
  --sl-surface-2: #efe4d2;
  --sl-text: #17211e;
  --sl-muted: #61736c;
  --sl-line: rgba(23, 33, 30, .14);
  --sl-accent: #1f7f66;
  --sl-gold: #9b6f24;
}
html[data-theme="day"] body,
html[data-theme="day"] html { background: var(--sl-bg); }
html[data-theme="day"] .inside-article,
html[data-theme="day"] .page-header { background: linear-gradient(145deg, rgba(255,249,238,.96), rgba(246,241,231,.94)) !important; box-shadow: 0 18px 60px rgba(97, 74, 35, .12); }

.sl-blog-controls {
  width: min(1120px, calc(100% - 2rem));
  margin: -1.5rem auto 3rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .75rem;
}
.sl-segmented { display: inline-flex; padding: .22rem; border: 1px solid var(--sl-line); border-radius: 999px; background: var(--sl-surface); }
.sl-segmented button { min-width: 3.1rem; min-height: 2.35rem; border: 0; border-radius: 999px; background: transparent; color: var(--sl-muted); font: inherit; font-size: .86rem; font-weight: 800; cursor: pointer; }
.sl-segmented button.is-active { background: var(--sl-text); color: var(--sl-bg); }
.sl-theme-toggle { width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid var(--sl-line); background: var(--sl-surface); color: var(--sl-text); display: grid; place-items: center; cursor: pointer; }
.sl-theme-toggle .sl-icon { grid-area: 1 / 1; width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: opacity .18s ease, transform .18s ease; }
.sl-theme-toggle .sl-sun circle { fill: currentColor; stroke: none; }
html[data-theme="night"] .sl-theme-toggle .sl-sun, html:not([data-theme="day"]) .sl-theme-toggle .sl-sun { opacity: 0; transform: rotate(-18deg) scale(.75); }
html[data-theme="day"] .sl-theme-toggle .sl-moon { opacity: 0; transform: rotate(18deg) scale(.75); }
.sl-lang-note { width: min(760px, calc(100% - 2rem)); margin: 0 auto 1.5rem; padding: .9rem 1rem; border: 1px solid var(--sl-line); border-radius: 18px; background: color-mix(in srgb, var(--sl-surface) 86%, transparent); color: var(--sl-muted); font-size: .95rem; }
.sl-soft-cta { border: 1px solid var(--sl-line); background: color-mix(in srgb, var(--sl-surface-2) 55%, transparent); border-radius: 22px; padding: 1rem 1.1rem; color: var(--sl-muted); }
.sl-soft-cta h2 { margin-top: 0 !important; }

@media (max-width: 760px) {
  .sl-blog-controls { justify-content: space-between; margin-top: -1rem; }
}

/* Mobile/footer controls correction — avoid GeneratePress/global button bleed. */
.read-more,
.entry-content .button,
input[type="submit"] {
  border-radius: 999px !important;
  background: var(--sl-accent) !important;
  color: #0b1110 !important;
  font-weight: 800;
}
.sl-segmented button,
.sl-theme-toggle {
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none !important;
}
.sl-segmented button {
  background: transparent !important;
  color: var(--sl-muted) !important;
  padding: 0 .85rem !important;
  line-height: 1 !important;
}
.sl-segmented button.is-active {
  background: var(--sl-accent) !important;
  color: #0b1110 !important;
}
.sl-theme-toggle {
  flex: 0 0 2.75rem;
  padding: 0 !important;
  background: var(--sl-surface) !important;
  color: var(--sl-text) !important;
}
.byline { display: none !important; }
.entry-meta { display: flex; flex-wrap: wrap; gap: .35rem; }

@media (max-width: 760px) {
  .sl-blog-controls {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
  }
  .sl-segmented { flex: 0 0 auto; }
  .sl-segmented button { min-width: 3rem; min-height: 2.45rem; }
  .sl-theme-toggle { width: 2.75rem; height: 2.75rem; }
}

/* UX audit fixes — stable footer controls, journal intro, less WordPress metadata. */
.sl-journal-intro {
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto 1.4rem;
  border: 1px solid var(--sl-line);
  border-radius: 28px;
  padding: clamp(1.3rem, 4vw, 2.6rem);
  background: linear-gradient(145deg, rgba(17,28,26,.92), rgba(11,17,16,.94));
}
html[data-theme="day"] .sl-journal-intro { background: linear-gradient(145deg, rgba(255,249,238,.96), rgba(246,241,231,.94)); }
.sl-kicker { margin: 0 0 .45rem; color: var(--sl-accent); font-size: .78rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.sl-journal-intro h1 { margin: 0 0 .7rem; color: var(--sl-text); font-size: clamp(2rem, 5vw, 4rem); line-height: 1.12; letter-spacing: -.035em; }
.sl-journal-intro p:last-child { margin-bottom: 0; color: var(--sl-muted); max-width: 760px; }
.entry-meta { display: none !important; }
.sl-blog-footer { align-items: flex-start; }
.sl-blog-footer-side { display: flex; flex-direction: column; align-items: flex-end; gap: .9rem; }
.sl-blog-controls {
  width: auto;
  margin: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .7rem;
}
.sl-lang-static { min-height: 2.35rem; display: inline-flex; align-items: center; padding: 0 .85rem; border: 1px solid var(--sl-line); border-radius: 999px; color: var(--sl-muted); font-size: .86rem; font-weight: 800; background: var(--sl-surface); }
.sl-segmented { display: none !important; }

@media (max-width: 760px) {
  .sl-blog-footer-side { align-items: flex-start; }
  .sl-blog-controls { justify-content: flex-start; width: auto; margin: 0; }
  .sl-journal-intro h1 { line-height: 1.25; letter-spacing: -.01em; }
}

/* 2026-05-23 mobile polish — make the journal feel designed, not like WP escaped containment. */
.blog .entry-title,
.archive .entry-title { max-width: 820px; }
.blog .entry-summary,
.archive .entry-summary { max-width: 720px; color: var(--sl-muted); }
.blog .entry-summary p,
.archive .entry-summary p { margin-bottom: 0; }

@media (max-width: 760px) {
  body {
    font-size: 16px;
    line-height: 1.78;
    -webkit-font-smoothing: antialiased;
  }

  .sl-blog-header {
    width: calc(100% - 2rem);
    padding: 1.15rem 0 .85rem;
    gap: .85rem;
  }

  .sl-blog-brand {
    gap: .62rem;
    font-size: 1.08rem;
    letter-spacing: -.03em;
  }

  .sl-blog-brand img {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .65rem;
  }

  .sl-blog-nav {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, max-content);
    justify-content: start;
    gap: .35rem;
    overflow-x: auto;
    padding-bottom: .1rem;
    scrollbar-width: none;
    font-size: .9rem;
  }

  .sl-blog-nav::-webkit-scrollbar { display: none; }

  .sl-blog-nav a {
    padding: .34rem .55rem;
    border-radius: 999px;
    color: color-mix(in srgb, var(--sl-text) 70%, transparent);
  }

  .sl-blog-nav a[aria-current="page"] {
    background: color-mix(in srgb, var(--sl-accent) 15%, transparent);
    color: var(--sl-text);
  }

  .site-content {
    width: calc(100% - 1.5rem);
    padding: 1rem 0 1.8rem;
  }

  .sl-journal-intro {
    width: calc(100% - 1.5rem);
    margin-bottom: .9rem;
    padding: 1.25rem 1.15rem 1.35rem;
    border-radius: 24px;
    box-shadow: 0 16px 42px rgba(0, 0, 0, .12);
  }

  .sl-kicker {
    font-size: .68rem;
    letter-spacing: .16em;
    margin-bottom: .5rem;
  }

  .sl-journal-intro h1 {
    font-size: clamp(1.85rem, 8vw, 2.35rem);
    line-height: 1.2;
    letter-spacing: -.015em;
    margin-bottom: .75rem;
  }

  .sl-journal-intro p:last-child {
    font-size: .98rem;
    line-height: 1.82;
  }

  .blog .inside-article,
  .archive .inside-article {
    padding: 1.18rem 1.1rem 1.22rem !important;
    margin-bottom: .85rem;
    border-radius: 24px;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .10);
  }

  .blog .entry-title,
  .archive .entry-title {
    font-size: clamp(1.48rem, 7vw, 2.05rem);
    line-height: 1.24 !important;
    letter-spacing: -.01em !important;
    margin-bottom: .75rem;
  }

  .blog .entry-summary,
  .archive .entry-summary {
    font-size: .98rem;
    line-height: 1.72;
  }

  .blog .entry-summary p,
  .archive .entry-summary p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .single .inside-article {
    padding: 1.35rem 1.15rem !important;
    border-radius: 24px;
  }

  .single .entry-title {
    font-size: clamp(1.7rem, 8vw, 2.35rem);
    line-height: 1.22 !important;
  }

  .entry-content {
    font-size: 1rem;
    line-height: 1.85;
  }

  .entry-content h2 { font-size: 1.35rem; }
  .entry-content h3 { font-size: 1.12rem; }

  .sl-blog-footer {
    width: calc(100% - 1.5rem);
    padding-top: 1.4rem;
  }
}

@media (max-width: 390px) {
  .sl-blog-nav { font-size: .86rem; gap: .18rem; }
  .sl-blog-nav a { padding-inline: .45rem; }
  .sl-journal-intro h1 { font-size: 1.78rem; }
  .blog .entry-title,
  .archive .entry-title { font-size: 1.42rem; }
}

/* 2026-05-23 mobile pass 2 — quieter editorial rhythm. */
@media (max-width: 760px) {
  html[data-theme="day"] body {
    background:
      radial-gradient(circle at 18% 0%, rgba(31,127,102,.10), transparent 30rem),
      linear-gradient(180deg, #f8f3ea 0%, #f1eadf 100%);
  }

  .sl-blog-header {
    position: sticky;
    top: 0;
    z-index: 20;
    width: 100%;
    padding: .75rem 1rem .7rem;
    border-bottom: 1px solid color-mix(in srgb, var(--sl-line) 75%, transparent);
    background: color-mix(in srgb, var(--sl-bg) 88%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .sl-blog-brand span { font-size: 1rem; }
  .sl-blog-brand img { width: 1.95rem; height: 1.95rem; }

  .sl-blog-nav {
    gap: .25rem;
    font-weight: 750;
  }

  .sl-blog-nav a {
    padding: .28rem .52rem;
    font-size: .84rem;
  }

  .site-content { padding-top: .7rem; }

  .sl-journal-intro {
    border: 0;
    background: transparent !important;
    box-shadow: none;
    padding: 1.1rem .35rem 1rem;
    margin-bottom: .35rem;
  }

  .sl-kicker {
    color: var(--sl-accent);
    font-size: .66rem;
  }

  .sl-journal-intro h1 {
    max-width: 9.5em;
    font-size: clamp(1.72rem, 7.2vw, 2.15rem);
    line-height: 1.18;
  }

  .sl-journal-intro p:last-child {
    max-width: 24em;
    font-size: .94rem;
    color: color-mix(in srgb, var(--sl-muted) 92%, var(--sl-text));
  }

  .blog .site-main,
  .archive .site-main { counter-reset: sl-post; }

  .blog article,
  .archive article { counter-increment: sl-post; }

  .blog .inside-article,
  .archive .inside-article {
    position: relative;
    overflow: hidden;
    padding: 1.05rem 1rem 1.08rem !important;
    border-radius: 20px;
    border-color: color-mix(in srgb, var(--sl-line) 82%, transparent);
  }

  .blog .inside-article::before,
  .archive .inside-article::before {
    content: "NOTE " counter(sl-post, decimal-leading-zero);
    display: inline-flex;
    margin-bottom: .48rem;
    color: var(--sl-accent);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .14em;
  }

  .blog .inside-article::after,
  .archive .inside-article::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--sl-accent), transparent 72%);
    opacity: .58;
  }

  .blog .entry-title,
  .archive .entry-title {
    font-size: clamp(1.28rem, 5.9vw, 1.72rem) !important;
    line-height: 1.28 !important;
    margin-bottom: .58rem;
  }

  .blog .entry-title a,
  .archive .entry-title a { display: block; }

  .blog .entry-title a::after,
  .archive .entry-title a::after {
    content: "閱讀 →";
    display: block;
    width: max-content;
    margin-top: .72rem;
    padding: .28rem .66rem .32rem;
    border: 1px solid color-mix(in srgb, var(--sl-accent) 42%, transparent);
    border-radius: 999px;
    color: var(--sl-accent);
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .02em;
  }

  .blog .entry-summary,
  .archive .entry-summary {
    font-size: .92rem;
    line-height: 1.68;
  }

  .blog .entry-summary p,
  .archive .entry-summary p { -webkit-line-clamp: 3; }
}

/* 2026-05-23 mobile pass 3 — cache-busted readability tuning. */
@media (max-width: 760px) {
  .sl-blog-nav a[aria-current="page"] {
    background: color-mix(in srgb, var(--sl-accent) 24%, transparent);
    color: var(--sl-text);
    font-weight: 900;
  }

  .sl-journal-intro p:last-child,
  .blog .entry-summary,
  .archive .entry-summary {
    color: color-mix(in srgb, var(--sl-muted) 72%, var(--sl-text));
  }

  html[data-theme="day"] .blog .inside-article,
  html[data-theme="day"] .archive .inside-article,
  html[data-theme="day"] .sl-journal-intro {
    background: linear-gradient(145deg, rgba(255,252,246,.96), rgba(248,243,234,.86)) !important;
  }

  .sl-journal-intro {
    padding-top: 1rem;
    padding-bottom: 1.05rem;
  }

  .blog .inside-article::before,
  .archive .inside-article::before {
    margin-bottom: .4rem;
  }

  .blog .entry-title a::after,
  .archive .entry-title a::after {
    margin-top: .62rem;
  }
}

/* 2026-05-23 mobile pass 4 — better card reading flow. */
@media (max-width: 760px) {
  .sl-journal-intro {
    margin-top: .2rem;
    padding: .95rem 1rem 1rem;
    border-radius: 22px;
  }

  .sl-kicker {
    font-size: .64rem;
    margin-bottom: .42rem;
  }

  .sl-journal-intro h1 {
    font-size: clamp(1.58rem, 6.8vw, 1.98rem);
    max-width: 10.8em;
    margin-bottom: .58rem;
  }

  .sl-journal-intro p:last-child {
    font-size: .9rem;
    line-height: 1.68;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .blog .inside-article,
  .archive .inside-article {
    padding: 1rem 1rem 1.05rem !important;
    border-radius: 21px;
  }

  .blog .entry-title,
  .archive .entry-title {
    font-size: clamp(1.2rem, 5.55vw, 1.58rem) !important;
    margin-bottom: .52rem;
  }

  .blog .entry-title a::after,
  .archive .entry-title a::after {
    display: none;
  }

  .blog .entry-summary,
  .archive .entry-summary {
    font-size: .9rem;
    line-height: 1.65;
  }

  .blog .entry-summary::after,
  .archive .entry-summary::after {
    content: "閱讀 →";
    display: inline-flex;
    margin-top: .75rem;
    padding: .26rem .68rem .3rem;
    border: 1px solid color-mix(in srgb, var(--sl-accent) 44%, transparent);
    border-radius: 999px;
    color: var(--sl-accent);
    font-size: .76rem;
    font-weight: 900;
    line-height: 1;
  }

  .blog .inside-article::before,
  .archive .inside-article::before {
    font-size: .63rem;
    letter-spacing: .12em;
  }
}

/* 2026-05-23 mobile pass 5 — unify the layout system. */
@media (max-width: 760px) {
  :root {
    --sl-mobile-gutter: 18px;
    --sl-mobile-radius: 22px;
  }

  body {
    overflow-x: hidden;
  }

  .sl-blog-header {
    position: relative;
    width: 100%;
    padding: 1.05rem var(--sl-mobile-gutter) .95rem;
    background: var(--sl-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .sl-blog-brand {
    margin: 0;
    font-size: 1.02rem;
  }

  .sl-blog-nav {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: .38rem;
    row-gap: .45rem;
    padding: .12rem 0 0;
    overflow: visible;
    font-size: .88rem;
  }

  .sl-blog-nav a {
    padding: .28rem .5rem .32rem;
    border-radius: 999px;
    line-height: 1.2;
  }

  .site-content,
  .sl-journal-intro,
  .blog .inside-article,
  .archive .inside-article,
  .single .inside-article {
    box-sizing: border-box;
    width: calc(100vw - (var(--sl-mobile-gutter) * 2));
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  .site-content {
    padding: 1rem 0 2rem;
  }

  .sl-journal-intro,
  .blog .inside-article,
  .archive .inside-article,
  .single .inside-article {
    border-radius: var(--sl-mobile-radius);
    border: 1px solid color-mix(in srgb, var(--sl-line) 88%, transparent);
    background: linear-gradient(145deg, rgba(255,252,246,.96), rgba(248,243,234,.9)) !important;
    box-shadow: none;
  }

  html[data-theme="night"] .sl-journal-intro,
  html[data-theme="night"] .blog .inside-article,
  html[data-theme="night"] .archive .inside-article,
  html[data-theme="night"] .single .inside-article,
  html:not([data-theme="day"]) .sl-journal-intro,
  html:not([data-theme="day"]) .blog .inside-article,
  html:not([data-theme="day"]) .archive .inside-article,
  html:not([data-theme="day"]) .single .inside-article {
    background: linear-gradient(145deg, rgba(17,28,26,.92), rgba(11,17,16,.94)) !important;
  }

  .sl-journal-intro {
    padding: 1.15rem 1.08rem 1.18rem;
    margin-top: 0;
    margin-bottom: .85rem;
  }

  .sl-kicker {
    font-size: .65rem;
    line-height: 1;
    letter-spacing: .14em;
    margin: 0 0 .58rem;
  }

  .sl-journal-intro h1 {
    max-width: none;
    font-size: clamp(1.72rem, 7vw, 2.05rem);
    line-height: 1.18;
    letter-spacing: -.018em;
    margin: 0 0 .7rem;
  }

  .sl-journal-intro p:last-child {
    display: block;
    max-width: none;
    font-size: .94rem;
    line-height: 1.72;
    color: #50635b;
  }

  .blog .inside-article,
  .archive .inside-article {
    margin-bottom: .9rem;
    padding: 1.12rem 1.08rem 1.08rem !important;
  }

  .blog .inside-article::after,
  .archive .inside-article::after {
    width: 2px;
    opacity: .45;
  }

  .blog .inside-article::before,
  .archive .inside-article::before {
    font-size: .64rem;
    line-height: 1;
    letter-spacing: .12em;
    margin: 0 0 .7rem;
  }

  .blog .entry-title,
  .archive .entry-title {
    font-size: clamp(1.22rem, 5.25vw, 1.48rem) !important;
    line-height: 1.28 !important;
    letter-spacing: -.006em !important;
    margin: 0 0 .78rem;
    font-weight: 800 !important;
  }

  .blog .entry-summary,
  .archive .entry-summary {
    font-size: .93rem;
    line-height: 1.7;
    color: #52655d;
  }

  .blog .entry-summary p,
  .archive .entry-summary p {
    display: block;
    margin: 0;
  }

  .blog .entry-summary::after,
  .archive .entry-summary::after {
    margin-top: .85rem;
    font-size: .76rem;
  }
}

@media (max-width: 390px) {
  :root { --sl-mobile-gutter: 16px; }
  .sl-blog-nav { gap: .24rem; font-size: .84rem; }
  .sl-blog-nav a { padding-inline: .42rem; }
  .sl-journal-intro h1 { font-size: 1.62rem; }
  .blog .entry-title,
  .archive .entry-title { font-size: 1.2rem !important; }
}

/* 2026-05-23 mobile pass 6 — replace harsh left stripe with a softer card accent. */
@media (max-width: 760px) {
  .blog .inside-article::after,
  .archive .inside-article::after {
    display: none;
  }

  .blog .inside-article,
  .archive .inside-article {
    background:
      radial-gradient(circle at 1.1rem 1rem, color-mix(in srgb, var(--sl-accent) 13%, transparent), transparent 5.8rem),
      linear-gradient(145deg, rgba(255,252,246,.96), rgba(248,243,234,.9)) !important;
  }

  html[data-theme="night"] .blog .inside-article,
  html[data-theme="night"] .archive .inside-article,
  html:not([data-theme="day"]) .blog .inside-article,
  html:not([data-theme="day"]) .archive .inside-article {
    background:
      radial-gradient(circle at 1.1rem 1rem, color-mix(in srgb, var(--sl-accent) 16%, transparent), transparent 5.8rem),
      linear-gradient(145deg, rgba(17,28,26,.92), rgba(11,17,16,.94)) !important;
  }

  .blog .inside-article::before,
  .archive .inside-article::before {
    padding: .28rem .55rem .3rem;
    border: 1px solid color-mix(in srgb, var(--sl-accent) 24%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--sl-accent) 7%, transparent);
  }
}

/* 2026-05-23 mobile pass 7 — localize article index label. */
@media (max-width: 760px) {
  .blog .inside-article::before,
  .archive .inside-article::before {
    content: "第 " counter(sl-post, decimal-leading-zero) " 篇";
    letter-spacing: .08em;
    font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", "Manrope", sans-serif;
  }
}

/* 2026-05-23 mobile pass 8 — category label inherits from real WP category, no override */

/* FINAL: mobile nav single source of truth — overrides all earlier passes */
@media (max-width: 760px) {
  .sl-blog-header {
    grid-template-columns: 1fr;
  }
  .sl-blog-nav {
    justify-self: center;
    align-self: start;
    width: auto;
  }
}