/* Content navigation and reading surfaces. */
#header nav { gap: clamp(20px, 2.4vw, 38px); }
#language { min-width: 64px; font-size: 12px; }
.entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--muted); font: 11px/1.7 'SFMono-Regular', Consolas, monospace; }
.entry-meta > span + span::before { content: '/'; margin-right: 16px; color: #596c79; }
.entry-topics { display: flex; gap: 12px; flex-wrap: wrap; color: var(--accent); font-size: 11px; margin-bottom: 9px; }
.language-note { display: block; margin-top: 12px; color: #b5c0c5; font-size: 12px; line-height: 1.6; }
.home-journal { background: #121d28; border-block: 1px solid var(--line); }
.latest-layout { display: grid; grid-template-columns: 1.35fr 1fr; border-top: 1px solid var(--line); }
.latest-story { position: relative; overflow: hidden; padding: 40px 60px 40px 0; border-right: 1px solid var(--line); min-height: 370px; display: flex; flex-direction: column; align-items: flex-start; }
.latest-story > :not(.latest-glyph) { position: relative; z-index: 1; }
.latest-glyph { position: absolute; right: 25px; bottom: -45px; font: 260px/1 'Songti SC',serif; color: #a3bdc809; pointer-events: none; }
.latest-story h2 { font-size: clamp(28px, 3.1vw, 48px); line-height: 1.4; letter-spacing: -.025em; margin: 25px 0 20px; text-wrap: balance; }
.latest-story > p { font-size: 15px; line-height: 1.9; color: #b3bec6; max-width: 540px; }
.story-open { display: flex; justify-content: space-between; width: 100%; margin-top: auto; padding-top: 28px; font-size: 13px; color: var(--accent); }
.story-open > span { font-size: 23px; }
.latest-story:hover h2, .latest-side a:hover h3 { color: #c1d5de; }
.latest-side { padding-left: 40px; }
.latest-side > a { position: relative; display: block; padding: 32px 30px 30px 0; border-bottom: 1px solid var(--line); }
.latest-side h3 { font-size: clamp(19px, 1.9vw, 28px); line-height: 1.55; margin-top: 15px; }
.latest-side > a > span[aria-hidden] { position: absolute; right: 0; bottom: 32px; font-size: 22px; color: var(--accent); }
.follow-writing { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 25px; }
.follow-writing p { font: 20px/1.5 Georgia, serif; }
.follow-writing em { color: var(--muted); }
.follow-writing a { font-size: 12px; color: var(--accent); padding: 12px 0; }
.home-tools { padding-top: 55px; background: #121d28; border-top: 1px solid var(--line); }
.home-tool-grid, .tool-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.tool-card { position: relative; display: flex; flex-direction: column; padding: 30px; border: 1px solid #425361; background: linear-gradient(135deg,#1b2a37,#111d28); transition: border-color .2s, background .2s; }
.tool-card::before { content: ''; width: 25px; height: 2px; position: absolute; left: -1px; top: -1px; background: var(--accent); transition: width .25s; }
.tool-card:focus-within::before, .tool-card:hover::before { width: 70px; }
.tool-card:focus-within, .tool-card:hover { border-color: #8199a9; }
.tool-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.tool-card-top .eyebrow { color: var(--accent); font-size: 11px; }
.tool-card-symbol { font-size: 35px; line-height: 1; color: #8ca8b6; }
.tool-card h2, .tool-card h3 { font-size: clamp(23px,2.5vw,34px); line-height: 1.35; letter-spacing: -.025em; }
.tool-card > p { font-size: 14px; color: #adbcc7; margin: 20px 0 30px; max-width: 550px; }
.tool-card-actions { margin-top: auto; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.tool-launch { display: flex; gap: 32px; align-items: center; justify-content: space-between; min-height: 46px; padding: 11px 17px; background: #adbfca; color: #101b23; font-size: 13px; }
.tool-launch:hover { background: #d5e1e6; }
.tool-context { font-size: 12px; color: #bdcbd4; padding-block: 13px; }
.tool-context:hover { text-decoration: underline; text-underline-offset: 6px; }
.tool-group + .tool-group { margin-top: 65px; }
.tool-group-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.tool-group-heading h2 { font-size: 22px; }
.tool-group-heading > span { color: var(--muted); font: 11px/1.6 monospace; }
.tools-page .tool-group:first-of-type .tool-grid { grid-template-columns: 1fr; }
.tools-page #tool-markdown-converter { padding-right: 38%; background: radial-gradient(ellipse at 100% 90%, #294350 0, transparent 55%), #14212c; }
.tools-page #tool-markdown-converter::after { content: 'M↓'; position: absolute; right: 7%; top: 50%; transform: translateY(-50%); font: 150px/.9 monospace; letter-spacing: -.12em; color: #8faab325; pointer-events: none; }
.work-foot a { color: var(--accent); }
.work-foot a:hover { text-decoration: underline; text-underline-offset: 6px; }
.journal-page-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.journal-subscribe { border-left: 1px solid var(--line); padding: 8px 0 8px 25px; margin-bottom: 60px; display: flex; flex-direction: column; gap: 14px; }
.journal-subscribe span { color: var(--muted); font-size: 13px; }
.journal-subscribe a { color: var(--accent); font-size: 13px; padding: 10px 0; }
.topic-filters { margin-bottom: 0; border-bottom: 0; padding-bottom: 16px; }
.topic-filters button { display: inline-flex; gap: 10px; align-items: center; min-height: 44px; }
.topic-filters small { font-size: 10px; opacity: .8; }
.article-row-copy { min-width: 0; }
.article-row-copy > p { max-width: 760px; color: var(--muted); font-size: 14px; line-height: 1.85; margin-top: 13px; }
.article-date small { font-size: 11px; color: var(--muted); }
.article-row h3 { text-wrap: pretty; }
.article-row:hover { background: #182732; }
.pagination { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; padding-top: 35px; }
.pagination > a { font-size: 13px; padding: 12px 0; min-height: 44px; }
.pagination > a:last-child { text-align: right; }
.pagination > span { font: 12px monospace; color: var(--muted); }
.empty-state button { margin-top: 16px; border-bottom: 1px solid var(--accent); padding: 12px 0; color: var(--ink); }
.article-response { display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; margin: 60px 0; border: 1px solid var(--line); border-left: 3px solid #b4c4cb; padding: 35px; background: #14222e; }
.article-response h2 { margin: 17px 0; font-size: 34px; }
.article-response p:not(.eyebrow) { font-size: 15px; color: #b4c1ca; }
.article-response small { display: block; font: 11px/1.8 Arial,sans-serif; margin-top: 20px; color: var(--muted); }
.response-actions { display: flex; flex-direction: column; align-items: stretch; justify-content: center; }
.response-actions .primary-link { justify-content: space-between; font-size: 13px; }
.response-secondary { text-align: left; min-height: 44px; padding: 15px 0 12px; border-bottom: 1px solid #3b4c5b; font-size: 13px; color: #becdd7; }
.response-secondary:hover { color: white; }
.copy-status { font-size: 12px; color: var(--accent); line-height: 1.6; }
.copy-status:not(:empty) { padding-top: 13px; }
.copy-fallback { width: 100%; background: var(--bg); color: var(--ink); border: 1px solid var(--line); padding: 12px; margin-top: 12px; }
.article-linked-work { margin: 65px 0; }
.article-linked-work > .eyebrow { margin-bottom: 18px; }
.continue-reading { margin-top: 70px; }
.continue-reading .section-title { justify-content: space-between; }
.continue-reading h2 { font-size: 30px; }
.continue-reading .section-title a { font-size: 12px; color: var(--accent); }
.article-byline .language-note { margin: 0; font-size: 11px; }
.about-follow { display: flex; justify-content: space-between; gap: 20px; border-block: 1px solid var(--line); padding: 28px 0; margin-bottom: 80px; }
.about-follow a { color: var(--accent); font-size: 16px; padding: 8px 0; }
@media(max-width:1100px) {
  #header nav { gap: 22px; }
  .latest-story { padding-right: 32px; }
  .latest-side { padding-left: 30px; }
  .journal-subscribe { max-width: 250px; }
}
@media(max-width:820px) {
  html { scroll-padding-top: 120px; }
  #header { height: 108px; padding: 8px 22px 0; display: grid; grid-template-columns: 1fr auto; grid-template-rows: 51px 48px; }
  .brand > span:last-child { display: block; font-size: 13px; }
  .brand small { display: none; }
  .brand-mark { width: 31px; height: 40px; }
  #header > nav { grid-row: 2; grid-column: 1/-1; display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; width: 100%; }
  #header nav a { justify-content: center; font-size: 13px; min-height: 44px; }
  #header nav a::after { left: 25%; right: 25%; bottom: 1px; }
  #header nav a[aria-current]::after { width: 50%; }
  .header-actions { grid-row: 1; grid-column: 2; }
  .header-actions button { min-width: 36px; height: 44px; }
  #language { min-width: 62px; }
  .motion span { display: none; }
  .latest-layout { grid-template-columns: 1fr; }
  .latest-story { padding: 30px 0; min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .latest-story h2 { font-size: 32px; }
  .latest-side { padding-left: 0; }
  .latest-side h3 { font-size: 23px; }
  .latest-side > a { padding: 25px 30px 25px 0; }
  .latest-glyph { font-size: 200px; bottom: -25px; right: 5px; }
  .follow-writing { margin-top: 10px; }
  .home-tool-grid, .tool-grid { grid-template-columns: 1fr; }
  .journal-page-top { display: block; }
  .journal-subscribe { border-left: 0; padding: 0; margin: -25px 0 40px; max-width: none; flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; }
  .article-response { grid-template-columns: 1fr; gap: 24px; padding: 28px; }
  .tool-group-heading { flex-direction: column; gap: 10px; }
  .article-row-copy > p { font-size: 13px; }
  .tools-page #tool-markdown-converter { padding-right: 30px; }
  .tools-page #tool-markdown-converter::after { content: none; }
}
@media(max-width:480px) {
  #header { padding-inline: 16px; }
  .brand { gap: 9px; }
  .brand > span:last-child { font-size: 11px; }
  #header nav { gap: 6px; }
  #header nav a { font-size: 12px; }
  .home-journal, .home-tools { padding-top: 50px; padding-bottom: 55px; }
  .latest-story h2 { font-size: 29px; }
  .entry-meta { font-size: 10px; gap: 6px 10px; }
  .entry-meta > span + span::before { margin-right: 10px; }
  .latest-story > p { font-size: 14px; }
  .tool-card { padding: 24px; }
  .tool-card-actions { gap: 15px; }
  .tool-launch { gap: 20px; }
  .journal-subscribe { flex-direction: column; align-items: flex-start; gap: 6px; }
  .journal-page .article-row { padding: 28px 0; }
  .article-row-copy .entry-topics { margin-top: 3px; }
  .article-row-copy > p { margin-top: 10px; }
  .article-response { padding: 24px 20px; margin-block: 40px; }
  .article-response h2 { font-size: 29px; }
  .article-response .primary-link { gap: 10px; padding-inline: 12px; }
  .continue-reading .section-title { gap: 10px; }
  .continue-reading h2 { font-size: 25px; }
  .about-follow { font-size: 13px; }
}
@media(prefers-reduced-motion:reduce) { .tool-card, .tool-card::before { transition: none; } }
.tools-page .page-head { margin-bottom: 34px; }
.tools-page .page-head h1 { font-size: clamp(60px,7vw,92px); }
.tools-page #tool-markdown-converter { min-height: 260px; }
.tools-page #tool-markdown-converter-top { margin-bottom: 18px; }
.tools-page #tool-markdown-converter > p { margin-block: 14px 22px; }
.article-row h2 { font-size: clamp(20px,2vw,31px); line-height: 1.5; letter-spacing: -.02em; font-weight: 500; max-width: 850px; text-wrap: pretty; }

#main > .page-wrap, #main > .article-page { animation: content-enter .22s ease-out; }
@keyframes content-enter { from { opacity: .65; } to { opacity: 1; } }

/* Sections, series and the journal list. */
/* Same quiet mono line as the date row: section in accent, tags muted, slash-separated. */
.entry-topics { align-items: baseline; gap: 0; font: 11px/1.7 'SFMono-Regular', Consolas, 'PingFang SC', monospace; letter-spacing: .04em; }
.entry-topics span { color: var(--muted); }
.entry-topics span + span::before { content: '/'; margin: 0 10px; color: #596c79; }
.entry-topics .entry-category { color: var(--accent); }
.topic-filters .series-filter { border-style: dashed; }
.category-motto { max-width: 760px; margin: 4px 0 18px; color: var(--muted); font: italic 14px/1.9 Georgia, 'Songti SC', serif; }
.series-note { display: inline-block; margin-top: 12px; color: var(--accent); font: 11px/1.6 'SFMono-Regular', Consolas, monospace; }

/* Contents: the article's top level, with its sub-level indented. */
.article-toc > a.toc-depth-1 { padding-left: 14px; margin: 9px 0; font-size: 10.5px; color: #7f9192; }

/* GitHub links collapse into a compact icon chip. */
.gh-link { display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px; border: 1px solid #3f525e; background: #13202a; color: var(--cyan); text-decoration: none !important; font: 12px/1.8 'SFMono-Regular', Consolas, monospace; vertical-align: baseline; }
.gh-link:hover { border-color: var(--accent); color: var(--ink); }
.gh-icon { width: 13px; height: 13px; flex: none; }

/* Open Source Radar: one card per repository. */
.radar-item { margin: 34px 0; padding: 26px 28px 8px; border: 1px solid var(--line); background: linear-gradient(160deg, #15222d, #0f1922); }
.article-body .radar-item h3 { display: flex; align-items: baseline; gap: 14px; margin: 0 0 12px; font-size: clamp(21px, 2.2vw, 28px); }
.radar-no { color: var(--accent); font: 13px/1 'SFMono-Regular', Consolas, monospace; }
.radar-repo small { color: var(--muted); font-size: .62em; font-weight: 400; margin-right: 4px; }
.radar-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 18px; color: var(--muted); font: 12px/1.8 'SFMono-Regular', Consolas, monospace; }
.radar-verdict { padding: 12px 16px; border-left: 2px solid var(--accent); background: #1a2a36; }
.radar-check { color: var(--muted); font-size: 13px; }
@media (max-width: 760px) { .radar-item { padding: 20px 16px 4px; margin: 26px -6px; } }

/* Now page and project activity. */
.now-updated { color: var(--muted); font: 12px/1.6 'SFMono-Regular', Consolas, monospace; margin: -20px 0 26px; }
.now-page .section-title { margin-top: 70px; }
.activity-line { display: block; margin-top: 8px; color: var(--accent); font: 11px/1.7 'SFMono-Regular', Consolas, monospace; }
.activity-line:empty { display: none; }

/* RSS subscribe panel. */
#rss-content h2 { font-size: 23px; margin: 20px 0 14px; }
#rss-content p { color: var(--muted); font-size: 14px; line-height: 1.9; }
.feed-copy { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 18px; }
.feed-copy input:not([hidden]) { flex: 1 1 260px; min-width: 0; background: #0d1619; color: var(--ink); border: 1px solid #4b6265; padding: 13px 14px; font: 13px 'SFMono-Regular', Consolas, monospace; }
.feed-copy button { padding: 0 20px; min-height: 46px; background: #adbfca; color: #101b23; font-size: 13px; }
.feed-copy .copy-status { flex-basis: 100%; color: var(--accent); font-size: 12px; }
.feed-raw { color: var(--muted); font-size: 12px; }

/* Journal intro: the author's own lines, set like the poem rather than a tagline. */
.journal-page .page-head { margin-bottom: 28px; }
.journal-intro { max-width: 640px; margin-bottom: 60px; color: #b3bec6; font: 16px/2.1 'Songti SC', 'Noto Serif SC', Georgia, serif; letter-spacing: .04em; }
.journal-page-top .journal-subscribe { align-self: flex-end; }
@media (max-width: 760px) { .journal-intro { font-size: 15px; margin-bottom: 36px; } .journal-intro br { display: none; } }

/* Profiles: a quiet row in the footer, a fuller list on About. */
.footer-links > .footer-profiles { display: flex; align-items: center; gap: 4px; margin-left: auto; margin-right: 28px; }
.footer-profiles a { display: grid; place-items: center; width: 32px; height: 32px; color: var(--muted); transition: color .2s; }
.footer-profiles a:hover, .footer-profiles a:focus-visible { color: var(--ink); }
.profile-icon { width: 15px; height: 15px; flex: none; }
.profile-list a > span:first-child { display: inline-flex; align-items: center; gap: 12px; }
.profile-list .profile-icon { color: var(--muted); }
@media (max-width: 760px) { .footer-links > .footer-profiles { order: 3; flex-basis: 100%; margin: 6px 0 0 -9px; } }
.profiles { margin-top: 90px; }
.profile-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; border-top: 1px solid var(--line); }
.profile-list a { display: grid; grid-template-columns: 1fr auto 22px; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.profile-list small { color: var(--muted); font: 11px/1.6 'SFMono-Regular', Consolas, monospace; }
.profile-list a > span[aria-hidden] { color: var(--accent); }
.profile-list a:hover > span:first-child { color: var(--cyan); }
@media (max-width: 760px) { .profile-list { grid-template-columns: 1fr; } }

/* Poem faces are subset to the poem's own characters (OFL, see licenses/). */
@font-face { font-family: 'Poem Brush'; src: url('/static/fonts/poem-mashanzheng.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Poem Italic'; src: url('/static/fonts/poem-cormorant-italic.woff2') format('woff2'); font-style: italic; font-weight: 300 700; font-display: swap; }
/* The vertical poem is the hero's second voice: brush face, real size, columns staggered. */
.hero-poem:not(.hero-poem-en) { gap: clamp(14px, 1.6vw, 28px); }
.hero-poem > span { font-family: 'Poem Brush', 'Kaiti SC', 'STKaiti', serif; font-size: clamp(26px, 2.9vw, 52px); letter-spacing: .18em; }
.hero-poem > span:nth-child(2) { margin-top: 1.9em; }
/* English visitors get the Tolkien lines from the GitHub profile instead of vertical Chinese. */
.hero-poem-en { flex-direction: column; align-items: flex-end; gap: 14px; text-align: right; top: clamp(90px, 16vh, 170px); }
.hero-poem-en p span { display: block; }
.hero-poem-en p span:first-child { margin-right: 2.4em; }
/* Layered shadows keep the lines legible on the lit towers without a visible backing box. */
.hero-poem-en p { white-space: nowrap; font: italic 500 clamp(24px, 2.4vw, 42px)/1.45 'Poem Italic', Georgia, serif; color: #ecebe1; text-shadow: 0 0 2px #05090e, 0 1px 6px #05090e, 0 2px 22px #05090e, 0 0 46px #0a1018; }
.hero-poem-en small { font: 11px/1.6 "SFMono-Regular", Consolas, monospace; color: #b8c4cb; letter-spacing: .06em; text-shadow: 0 1px 8px #000; }
@media (max-width: 760px) { .hero-poem > span { font-size: 19px; letter-spacing: .14em; } .hero-poem-en p { font-size: 16px; white-space: normal; max-width: 210px; } .hero-poem-en p span:first-child { margin-right: 0; } }

/* A vermilion colophon beside the manifesto: Mao's "a single spark", tied to the ember theme. */
.manifesto-section { --tribute: #b23a2a; }
.manifesto-tribute { position: absolute; right: var(--space); top: 50%; transform: translateY(-50%); display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 14px; color: var(--tribute); }
.manifesto-tribute[lang="zh-CN"] span, .manifesto-tribute[lang="zh-CN"] small { writing-mode: vertical-rl; }
.manifesto-tribute span { font: clamp(17px, 1.5vw, 24px)/1.4 'Songti SC', 'STSong', 'Noto Serif SC', serif; letter-spacing: .32em; }
.manifesto-tribute small { position: relative; margin-top: 3.2em; padding: 10px 4px; font: 11px/1 'Songti SC', 'STSong', serif; letter-spacing: .3em; }
/* Half-bracket corners, like a colophon mark, instead of a closed stamp box. */
.manifesto-tribute[lang="zh-CN"] small::before, .manifesto-tribute[lang="zh-CN"] small::after { content: ''; position: absolute; width: 9px; height: 9px; border: 0 solid var(--tribute); }
.manifesto-tribute[lang="zh-CN"] small::before { top: 0; right: 0; border-width: 1px 1px 0 0; }
.manifesto-tribute[lang="zh-CN"] small::after { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.manifesto-tribute:not([lang]) { flex-direction: column; align-items: flex-end; gap: 8px; top: auto; bottom: 74px; transform: none; text-align: right; }
.manifesto-tribute:not([lang]) span { font: italic clamp(15px, 1.3vw, 20px)/1.5 Georgia, serif; letter-spacing: 0; }
.manifesto-tribute:not([lang]) small { margin: 0; padding: 0; border: 0; font: 11px/1.6 'SFMono-Regular', Consolas, monospace; letter-spacing: .04em; }
@media (max-width: 760px) {
  .manifesto-tribute, .manifesto-tribute:not([lang]) { position: static; transform: none; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin: -12px 0 26px; text-align: left; }
  .manifesto-tribute[lang="zh-CN"] span, .manifesto-tribute[lang="zh-CN"] small { writing-mode: horizontal-tb; }
  .manifesto-tribute small { margin: 0; padding: 4px 10px; }
}

/* Signature words: each one reacts in the spirit of its meaning. */
.identity-tags span { pointer-events: auto; }
.tag-fx { position: relative; display: inline-block; font-style: normal; cursor: default; transition: color .35s, text-shadow .35s, transform .35s, letter-spacing .35s, font-family 0s; }
/* 科学家: switches to a measuring typeface and a cold instrument glow. */
.tag-fx[data-tag="scientist"]:hover { font-family: 'SFMono-Regular', Consolas, monospace; color: #9fe8f2; letter-spacing: .08em; text-shadow: 0 0 8px #49d6ec99; animation: fx-flicker .5s steps(4) 1; }
/* 文豪: the stroke turns to brush, ink bleeding softly into the page. */
.tag-fx[data-tag="wordsmith"]:hover { font-family: 'Kaiti SC', 'STKaiti', 'KaiTi', serif; color: #f4efe1; transform: scale(1.18); text-shadow: 0 0 1px #f4efe1, 0 0 10px #f4efe155; }
/* 艺术家: colour runs through the word like wet paint. */
.tag-fx[data-tag="artist"]:hover { color: transparent; background: linear-gradient(90deg, #ff7a6b, #ffd36b, #7be0b0, #6bb8ff, #c48bff, #ff7a6b) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; animation: fx-paint 2.4s linear infinite; }
/* 战术大师: brackets close in like a target lock. */
.tag-fx[data-tag="tactician"]::before, .tag-fx[data-tag="tactician"]::after { position: absolute; top: 0; color: #f5b24a; opacity: 0; transition: opacity .3s, transform .3s; }
.tag-fx[data-tag="tactician"]::before { content: '['; left: -8px; transform: translateX(-8px); }
.tag-fx[data-tag="tactician"]::after { content: ']'; right: -8px; transform: translateX(8px); }
.tag-fx[data-tag="tactician"]:hover { color: #f5c46e; }
.tag-fx[data-tag="tactician"]:hover::before, .tag-fx[data-tag="tactician"]:hover::after { opacity: 1; transform: none; }
/* 侠: a blade of light cuts across and the word leans into the strike. */
.tag-fx[data-tag="knight"] { overflow: hidden; vertical-align: bottom; }
.tag-fx[data-tag="knight"]::after { content: ''; position: absolute; left: -60%; top: 50%; width: 60%; height: 1px; background: linear-gradient(90deg, transparent, #fff, #d9553f, transparent); transform: rotate(-14deg); opacity: 0; }
.tag-fx[data-tag="knight"]:hover { color: #fff; transform: skewX(-10deg); }
.tag-fx[data-tag="knight"]:hover::after { animation: fx-slash .45s ease-out 1 forwards; }
/* 光: it simply blooms. */
.tag-fx[data-tag="light"]:hover { color: #fffaf0; transform: scale(1.3); text-shadow: 0 0 6px #fff6dc, 0 0 16px #ffe7a8cc, 0 0 34px #ffd27a88, 0 0 60px #ffc35a55; }
@keyframes fx-flicker { 0% { opacity: .3; } 50% { opacity: 1; } 75% { opacity: .6; } 100% { opacity: 1; } }
@keyframes fx-paint { to { background-position: 300% 0; } }
@keyframes fx-slash { 0% { left: -60%; opacity: 1; } 100% { left: 110%; opacity: 0; } }
html[data-motion="off"] .tag-fx, html[data-motion="off"] .tag-fx::after { animation: none !important; transition: none; }
@media (prefers-reduced-motion: reduce) { .tag-fx, .tag-fx::after { animation: none !important; transition: none; } }

/* Section icons sit on the text baseline at the label's own size. */
.category-icon { width: 1.25em; height: 1.25em; flex: none; margin-right: .45em; vertical-align: -.25em; }
.entry-topics .entry-category { display: inline-flex; align-items: center; }
.topic-filters button .category-icon { width: 16px; height: 16px; margin-right: 0; }

/* English signature words are longer; keep them on one line on wider screens. */
html[lang="en"] .identity-tags { max-width: none; flex-wrap: nowrap; white-space: nowrap; }
html[lang="en"] .identity-tags span + span::before { margin: 0 9px; }
@media (max-width: 760px) { html[lang="en"] .identity-tags { flex-wrap: wrap; white-space: normal; } }