/* SignalTheme — reading, archive, and static pages */
.reading-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 3px; pointer-events: none; }
.reading-progress span { display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left center; will-change: transform; }

.article-hero { padding-top: 65px; padding-bottom: 74px; border-bottom: 1px solid var(--line); }
.back-link { display: inline-flex; align-items: center; gap: 7px; color: var(--subtle); font: 600 11px/1.3 var(--mono); letter-spacing: .08em; transition: color .2s; }
.back-link:hover { color: var(--accent); }
.back-link .icon { width: 18px; height: 18px; }
.article-kicker { margin-top: 105px; color: var(--accent); }
.reader-warning { display: inline-flex; align-items: center; gap: 9px; margin: 22px 0 0; padding: 9px 13px; border: 1px solid rgba(255, 155, 134, .42); border-radius: 3px; background: rgba(255, 155, 134, .09); color: #ffb09d; font: 600 12px/1.45 var(--sans); letter-spacing: .025em; }
.reader-warning::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; }
[data-theme="light"] .reader-warning { border-color: rgba(150, 55, 38, .35); background: rgba(150, 55, 38, .06); color: #8c3424; }
.article-hero h1 { max-width: 1100px; margin: 27px 0 0; font-size: clamp(46px, 6.2vw, 100px); font-weight: 710; line-height: 1.14; letter-spacing: -.075em; text-wrap: balance; }
.article-lead { max-width: 720px; margin: 26px 0 0; color: var(--muted); font-size: clamp(16px, 1.4vw, 20px); line-height: 1.75; }
.article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 42px; color: var(--subtle); font: 500 11px/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.article-meta span:empty { display: none; }
.meta-line { width: 27px; height: 1px; background: var(--line); }
.article-cover { overflow: hidden; height: clamp(260px, 38vw, 560px); margin-top: 38px; border-radius: 8px; background: var(--panel); }
.article-cover img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); }

.article-layout { display: grid; grid-template-columns: 230px minmax(0, 760px); justify-content: center; gap: clamp(50px, 7vw, 125px); padding-top: 100px; }
.article-sidebar { position: sticky; top: 122px; align-self: start; min-width: 0; }
.sidebar-label { display: block; padding-bottom: 16px; border-bottom: 1px solid var(--line); color: var(--text); font: 600 10px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.toc { display: flex; flex-direction: column; gap: 5px; max-height: min(65vh, 560px); overflow-y: auto; padding-top: 15px; scrollbar-width: thin; }
.toc a, .toc-empty { display: block; padding: 7px 10px 7px 12px; border-left: 1px solid var(--line); color: var(--subtle); font-size: 12px; line-height: 1.55; transition: border-color .2s, color .2s; }
.toc a:hover, .toc a.is-active { border-color: var(--accent); color: var(--text); }
.toc a.toc-level-3 { padding-left: 23px; font-size: 11px; }
.sidebar-decoration { display: block; width: 38px; height: 38px; margin-top: 50px; color: var(--accent); }

.article-content { min-width: 0; color: var(--text); font-size: 17px; line-height: 1.92; overflow-wrap: anywhere; }
.article-content > :first-child { margin-top: 0; }
.article-content p { margin: 0 0 1.55em; }
.article-content h1, .article-content h2, .article-content h3, .article-content h4, .article-content h5, .article-content h6 { scroll-margin-top: 120px; color: var(--text); line-height: 1.4; letter-spacing: -.045em; }
.article-content h1 { margin: 1.8em 0 .7em; font-size: 2.1em; }
.article-content h2 { margin: 2.25em 0 .8em; padding-bottom: .42em; border-bottom: 1px solid var(--line); font-size: 1.72em; }
.article-content h3 { margin: 2em 0 .75em; font-size: 1.3em; }
.article-content h4 { margin: 1.8em 0 .6em; font-size: 1.1em; }
.article-content a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 38%, transparent); text-underline-offset: 4px; transition: text-decoration-color .2s; }
.article-content a:hover { text-decoration-color: var(--accent); }
[data-theme="light"] .article-content a { color: #607900; }
.article-content del, .article-content s { text-decoration-color: #ff6b6b; text-decoration-thickness: 2px; }
[data-theme="light"] .article-content del, [data-theme="light"] .article-content s { text-decoration-color: #c92a2a; }
.article-content ul, .article-content ol { margin: 0 0 1.5em; padding-left: 1.45em; }
.article-content li { margin: .28em 0; padding-left: .2em; }
.article-content li::marker { color: var(--accent); }
.article-content blockquote { margin: 2em 0; padding: .7em 1.4em; border-left: 2px solid var(--accent); background: var(--panel); color: var(--muted); }
.article-content blockquote > :last-child { margin-bottom: 0; }
.article-content hr { height: 1px; margin: 3em 0; border: 0; background: var(--line); }
.article-content img { max-height: 750px; margin: 2em auto; border-radius: 7px; object-fit: contain; }
.article-content figure { margin: 2em 0; }
.article-content figcaption { margin-top: -1em; color: var(--subtle); font-size: 12px; text-align: center; }
.article-content :not(pre) > code { padding: 3px 6px; border: 1px solid #e7eaed; border-radius: 5px; background: #f3f4f4; color: inherit; font: 14px/1.4 var(--mono); }
[data-theme="dark"] .article-content :not(pre) > code { border-color: #404040; background: #2d2d2d; color: #d4d4d4; }
.article-content pre { overflow: auto; margin: 1em 0; padding: 1em; border-radius: 15px; background: #fff; color: #000; box-shadow: 0 2px 10px rgb(0 0 0 / 10%); font: 14px/1.75 var(--mono); tab-size: 4; }
[data-theme="dark"] .article-content pre { background: #1e1e1e; color: #d4d4d4; box-shadow: 0 2px 10px rgb(0 0 0 / 30%); }
.article-content pre code { padding: 0; border: 0; background: none; color: inherit; font: inherit; }
.article-content .hljs { display: block; overflow-x: auto; background: transparent; color: #000; }
.article-content .hljs-comment, .article-content .hljs-quote, .article-content .hljs-variable { color: green; }
.article-content .hljs-built_in, .article-content .hljs-keyword, .article-content .hljs-name, .article-content .hljs-selector-tag, .article-content .hljs-tag { color: #00f; }
.article-content .hljs-addition, .article-content .hljs-attribute, .article-content .hljs-literal, .article-content .hljs-section, .article-content .hljs-string, .article-content .hljs-template-tag, .article-content .hljs-template-variable, .article-content .hljs-title, .article-content .hljs-type { color: #a31515; }
.article-content .hljs-deletion, .article-content .hljs-meta, .article-content .hljs-selector-attr, .article-content .hljs-selector-pseudo { color: #2b91af; }
.article-content .hljs-doctag { color: grey; }
.article-content .hljs-attr { color: red; }
.article-content .hljs-bullet, .article-content .hljs-link, .article-content .hljs-symbol { color: #00b0e8; }
.article-content .hljs-emphasis { font-style: italic; }
.article-content .hljs-strong { font-weight: 700; }
[data-theme="dark"] .article-content .hljs { color: #d4d4d4; }
[data-theme="dark"] .article-content .hljs-comment, [data-theme="dark"] .article-content .hljs-quote, [data-theme="dark"] .article-content .hljs-variable { color: #6a9955; }
[data-theme="dark"] .article-content .hljs-built_in, [data-theme="dark"] .article-content .hljs-keyword, [data-theme="dark"] .article-content .hljs-name, [data-theme="dark"] .article-content .hljs-selector-tag, [data-theme="dark"] .article-content .hljs-tag { color: #569cd6; }
[data-theme="dark"] .article-content .hljs-addition, [data-theme="dark"] .article-content .hljs-attribute, [data-theme="dark"] .article-content .hljs-literal, [data-theme="dark"] .article-content .hljs-section, [data-theme="dark"] .article-content .hljs-string, [data-theme="dark"] .article-content .hljs-template-tag, [data-theme="dark"] .article-content .hljs-template-variable, [data-theme="dark"] .article-content .hljs-title, [data-theme="dark"] .article-content .hljs-type { color: #ce9178; }
[data-theme="dark"] .article-content .hljs-deletion, [data-theme="dark"] .article-content .hljs-meta, [data-theme="dark"] .article-content .hljs-selector-attr, [data-theme="dark"] .article-content .hljs-selector-pseudo { color: #9cdcfe; }
[data-theme="dark"] .article-content .hljs-doctag { color: #808080; }
[data-theme="dark"] .article-content .hljs-attr { color: #f44747; }
[data-theme="dark"] .article-content .hljs-bullet, [data-theme="dark"] .article-content .hljs-link, [data-theme="dark"] .article-content .hljs-symbol { color: #4fc1ff; }
.article-content table { display: block; width: 100%; overflow-x: auto; margin: 2em 0; border-collapse: collapse; font-size: 14px; }
.article-content th, .article-content td { padding: 11px 15px; border: 1px solid var(--line); text-align: left; white-space: nowrap; }
.article-content th { background: var(--panel); }
.article-content details { margin: 1.5em 0; padding: 15px 18px; border: 1px solid var(--line); border-radius: 6px; }
.article-content summary { cursor: pointer; font-weight: 600; }
.article-content kbd { padding: .15em .4em; border: 1px solid var(--line); border-radius: 3px; font: .8em var(--mono); }
.article-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 70px; padding-top: 28px; border-top: 1px solid var(--line); }
.article-tags span { padding: 5px 11px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); font: 500 11px/1.5 var(--mono); }
.article-end { margin: 65px 0 0 !important; color: var(--subtle); font-size: 12px; }
.article-end .icon { width: 21px; height: 21px; margin-right: 9px; color: var(--accent); vertical-align: -5px; }

.post-navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin-top: 110px; margin-bottom: 135px; }
.post-nav-item { display: flex; flex-direction: column; justify-content: space-between; gap: 25px; min-height: 150px; padding: 26px 28px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); transition: border-color .25s, transform .25s; }
.post-nav-item:hover { transform: translateY(-4px); border-color: var(--accent); }
.post-nav-label { display: inline-flex; align-items: center; gap: 5px; color: var(--subtle); font: 500 10px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.post-nav-label .icon { width: 14px; height: 14px; }
.post-nav-item strong { max-width: 400px; font-size: clamp(16px, 1.5vw, 22px); font-weight: 620; line-height: 1.45; letter-spacing: -.035em; }
.post-nav-item:last-child:nth-child(2) { text-align: right; align-items: flex-end; }

/* Archive */
.archive-hero { position: relative; overflow: hidden; padding-top: 130px; padding-bottom: 55px; border-bottom: 1px solid var(--line); }
.archive-hero-mark { position: absolute; right: 4%; bottom: -85px; width: clamp(250px, 30vw, 460px); height: clamp(250px, 30vw, 460px); color: var(--accent); opacity: .14; stroke-width: .7; }
.archive-hero h1 { position: relative; z-index: 1; max-width: 1100px; margin: 26px 0 90px; font-size: clamp(58px, 8vw, 128px); font-weight: 700; line-height: 1.1; letter-spacing: -.085em; }
.archive-hero-bottom { position: relative; z-index: 1; display: flex; justify-content: space-between; color: var(--muted); font: 500 11px/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.archive-hero-bottom .icon { width: 25px; height: 25px; color: var(--accent); }
.archive-content { padding-top: 50px; padding-bottom: 145px; }
.archive-year { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 70px; padding-block: 55px; border-bottom: 1px solid var(--line); }
.archive-year-heading h2 { margin: 0; color: var(--accent); font: 630 clamp(45px, 5vw, 75px)/1 var(--mono); letter-spacing: -.1em; }
[data-theme="light"] .archive-year-heading h2 { color: #62790a; }
.archive-year-heading span { display: block; margin-top: 16px; color: var(--subtle); font: 500 10px/1.4 var(--mono); letter-spacing: .12em; }
.archive-row { display: grid; grid-template-columns: 70px minmax(0, 1fr) 110px 22px; align-items: center; gap: 15px; min-height: 77px; border-bottom: 1px solid var(--line); transition: padding .25s; }
.archive-row:first-child { border-top: 1px solid var(--line); }
.archive-row:hover { padding-left: 10px; }
.archive-row time { color: var(--subtle); font: 500 11px/1 var(--mono); }
.archive-row strong { overflow: hidden; font-size: 17px; font-weight: 580; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; transition: color .2s; }
.archive-row:hover strong { color: var(--accent); }
.archive-row-category { overflow: hidden; color: var(--subtle); font-size: 11px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.archive-row-arrow { justify-self: end; width: 19px; height: 19px; color: var(--accent); transition: transform .25s; }
.archive-row:hover .archive-row-arrow { transform: translate(3px, -3px); }

/* Static pages */
.static-hero { position: relative; min-height: 390px; display: flex; flex-direction: column; justify-content: center; padding-block: 105px; border-bottom: 1px solid var(--line); }
.static-hero h1 { position: relative; z-index: 1; margin: 23px 0 0; font-size: clamp(60px, 8vw, 120px); font-weight: 720; line-height: 1.1; letter-spacing: -.08em; }
.static-hero-glyph { position: absolute; right: 8%; top: 22%; width: clamp(150px, 20vw, 280px); height: clamp(150px, 20vw, 280px); color: var(--accent); opacity: .3; stroke-width: .7; }
.static-layout { display: grid; grid-template-columns: 230px minmax(0, 760px); justify-content: center; gap: clamp(50px, 7vw, 125px); padding-block: 105px 145px; }
.static-side { display: flex; flex-direction: column; gap: 19px; padding-top: 10px; color: var(--subtle); font: 500 10px/1.4 var(--mono); letter-spacing: .12em; }
.side-line { width: 45px; height: 1px; background: var(--accent); }
.static-content { min-height: 300px; }

@media (max-width: 1050px) {
    .article-layout, .static-layout { grid-template-columns: 170px minmax(0, 760px); gap: 50px; }
    .archive-year { grid-template-columns: 170px minmax(0, 1fr); gap: 35px; }
}
@media (max-width: 760px) {
    .article-hero { padding-top: 40px; padding-bottom: 55px; }
    .article-kicker { margin-top: 70px; }
    .article-hero h1 { font-size: clamp(43px, 9vw, 70px); }
    .article-layout, .static-layout { display: block; padding-top: 65px; }
    .article-sidebar, .static-side { display: none; }
    .article-content { font-size: 16px; }
    .article-content pre { padding: 18px; }
    .post-navigation { margin-top: 80px; margin-bottom: 95px; }
    .archive-hero { padding-top: 95px; }
    .archive-hero h1 { margin-bottom: 70px; font-size: clamp(51px, 10vw, 80px); }
    .archive-year { display: block; }
    .archive-year-heading { display: flex; align-items: baseline; gap: 18px; margin-bottom: 28px; }
    .archive-row { grid-template-columns: 55px minmax(0, 1fr) 20px; }
    .archive-row-category { display: none; }
    .static-hero { min-height: 300px; }
    .static-hero-glyph { right: 0; top: 28%; }
}
@media (max-width: 480px) {
    .article-hero h1 { font-size: 42px; }
    .article-meta { gap: 11px; }
    .article-cover { height: 230px; }
    .post-navigation { grid-template-columns: 1fr; }
    .post-nav-item { min-height: 115px; }
    .archive-row strong { font-size: 15px; }
}
@media print {
    .reading-progress, .article-sidebar, .post-navigation { display: none !important; }
    .article-layout { display: block; padding-top: 0; }
    .article-content { color: black; }
    .article-content pre { white-space: pre-wrap; }
}