:root { --article-measure: 720px; }
.article-page { background: var(--paper); }
.article-page main { padding-top: var(--header-h); }
.article-progress { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 2px; pointer-events: none; }
.article-progress span { display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.article-close { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink-soft); font-size: 12px; text-decoration: none; }
.article-close span { color: var(--accent); font-size: 16px; }
.article-hero { position: relative; overflow: hidden; width: min(calc(100% - 48px), 1500px); min-height: clamp(610px, calc(100svh - var(--header-h)), 790px); margin: 0 auto; padding: clamp(48px, 5vw, 76px) clamp(32px, 5vw, 80px) 54px; border-bottom: 1px solid var(--divider); }
.article-hero::before { position: absolute; top: 0; bottom: 0; left: 5%; width: 1px; content: ""; background: color-mix(in srgb, var(--accent) 15%, transparent); }
.article-hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(520px, .98fr) minmax(460px, 1.02fr); align-items: center; gap: clamp(45px, 6vw, 96px); max-width: 1340px; margin: 0 auto; }
.article-hero__copy { max-width: 670px; padding-left: 0; }
.article-back { display: inline-block; margin-bottom: 30px; color: var(--secondary); font-size: 12px; text-decoration: none; }
.article-back:hover { color: var(--accent); }
.article-kicker { margin: 0 0 18px; color: var(--accent); font: 10px "IBM Plex Mono", monospace; letter-spacing: .1em; }
.article-hero h1 { margin: 0; font: 600 clamp(42px, 4.35vw, 65px)/1.34 "Noto Serif SC", serif; letter-spacing: -.055em; }
.article-hero h1 em { display: inline; padding: 0 .08em .08em; background: var(--accent-soft); color: color-mix(in srgb, var(--accent) 85%, var(--ink)); font-style: normal; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.article-deck { max-width: 600px; margin: 22px 0 0; color: var(--ink-soft); font: 400 17px/1.9 "LXGW WenKai", "Noto Serif SC", serif; }
.article-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 24px; color: var(--secondary); font: 10px "IBM Plex Mono", monospace; }
.article-meta span { padding-left: 18px; border-left: 1px solid var(--divider); }
.article-cover { position: relative; width: min(100%, 640px); margin: 0; justify-self: end; }
.article-cover::before { position: absolute; z-index: -1; inset: 7% -3% -4% 9%; content: ""; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); transform: rotate(2deg); }
.article-cover img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; clip-path: polygon(1% 1%, 18% 0, 38% 2%, 58% 0, 78% 2%, 100% 0, 99% 22%, 100% 45%, 98% 68%, 100% 100%, 78% 98%, 56% 100%, 32% 98%, 0 100%); box-shadow: var(--shadow); }
.article-cover figcaption, .article-wide-image figcaption { display: grid; grid-template-columns: 58px 1fr; gap: 14px; margin-top: 14px; color: var(--secondary); font-size: 12px; line-height: 1.65; }
.article-cover figcaption b, .article-wide-image figcaption b { color: var(--accent); font: 9px "IBM Plex Mono", monospace; }
.article-hero__index { position: absolute; z-index: 0; right: 2%; bottom: -4%; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 16%, transparent); font: 600 clamp(160px, 22vw, 340px)/.8 "Cormorant Garamond", serif; letter-spacing: -.06em; }
.article-layout { position: relative; display: grid; grid-template-columns: 180px minmax(0, var(--article-measure)); justify-content: center; gap: clamp(38px, 4.5vw, 68px); width: min(calc(100% - 48px), 1120px); margin: 0 auto; padding: 72px 24px 110px; }
.article-toc { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; min-width: 0; padding: 18px 18px 20px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--divider); background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(10px); }
.article-toc > p { margin: 0 0 19px; color: var(--accent); font: 9px "IBM Plex Mono", monospace; letter-spacing: .12em; }
.article-toc nav { display: grid; }
.article-toc a { position: relative; padding: 9px 0 9px 13px; color: var(--secondary); font-size: 12px; line-height: 1.45; text-decoration: none; transition: color .2s, padding .2s; }
.article-toc a::before { position: absolute; top: 50%; left: 0; width: 4px; height: 4px; border: 1px solid var(--divider); border-radius: 50%; content: ""; transform: translateY(-50%); }
.article-toc a:hover, .article-toc a.is-active { padding-left: 17px; color: var(--accent); }
.article-toc a.is-active::before { border-color: var(--accent); background: var(--accent); }
.toc-line { position: relative; display: block; width: 1px; height: 84px; margin: 18px 0 0 2px; background: var(--divider); }
.toc-line i { position: absolute; top: 0; left: 0; width: 1px; height: var(--toc-progress, 0%); background: var(--accent); }
.article-prose { grid-column: 2; min-width: 0; color: var(--ink-soft); font-family: "Noto Serif SC", serif; font-size: 18px; line-height: 1.95; overflow-wrap: break-word; }
.article-prose p { margin: 0 0 1.5em; }
.article-intro { margin-bottom: 48px !important; color: var(--ink); font: 400 21px/1.9 "LXGW WenKai", "Noto Serif SC", serif; }
.article-intro::first-letter { float: left; margin: .12em .1em 0 0; color: var(--accent); font: 600 4.2em/.75 "Cormorant Garamond", serif; }
.article-summary { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); margin-bottom: 78px; border-top: 1px solid var(--ink); border-left: 1px solid var(--divider); }
.article-summary a { display: grid; gap: 7px; min-height: 112px; padding: 17px 18px; border-right: 1px solid var(--divider); border-bottom: 1px solid var(--divider); text-decoration: none; transition: background .2s; }
.article-summary a:hover { background: var(--accent-soft); }
.article-summary span { color: var(--accent); font: 10px "IBM Plex Mono", monospace; }
.article-summary b { color: var(--ink); font-size: 17px; }
.article-summary small { color: var(--secondary); font-family: sans-serif; font-size: 12px; }
.article-prose section { position: relative; scroll-margin-top: calc(var(--header-h) + 28px); margin-bottom: 82px; }
.prose-section-head { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: start; margin-bottom: 27px; padding-top: 12px; border-top: 1px solid var(--ink); }
.prose-section-head::after { position: absolute; top: -1px; left: 0; width: 72px; height: 3px; content: ""; background: var(--accent); transform-origin: left; }
.prose-section-head > span { color: var(--accent); font: 600 42px/1 "Cormorant Garamond", serif; }
.prose-section-head p { margin: 0 0 10px; color: var(--accent); font: 9px "IBM Plex Mono", monospace; letter-spacing: .09em; }
.article-prose h2 { margin: 0; color: var(--ink); font: 600 clamp(28px, 2.35vw, 36px)/1.55 "Noto Serif SC", serif; letter-spacing: -.035em; text-wrap: balance; word-break: normal; }
.article-prose h3 { position: relative; margin: 43px 0 14px; padding-left: 16px; color: var(--ink); font: 600 22px/1.5 "Noto Serif SC", serif; }
.article-prose h3::before { position: absolute; top: .38em; bottom: .3em; left: 0; width: 2px; content: ""; background: var(--accent); }
.section-lead { color: var(--secondary); font: 400 17px/1.9 "LXGW WenKai", "Noto Serif SC", serif; }
.article-prose ul, .article-prose ol { margin: 24px 0 32px; padding-left: 1.35em; }
.article-prose li { margin-bottom: 12px; padding-left: .4em; }
.article-prose li::marker { color: var(--accent); }
.article-prose blockquote { position: relative; margin: 42px -28px; padding: 27px 32px 28px 36px; border-left: 0; background: var(--accent-soft); color: var(--ink); font: 400 20px/1.8 "LXGW WenKai", "Noto Serif SC", serif; }
.article-prose blockquote::before { position: absolute; top: 0; bottom: 0; left: 0; width: 4px; content: ""; background: var(--accent); }
.article-prose blockquote::after { position: absolute; top: 15px; right: 22px; color: color-mix(in srgb,var(--accent) 22%,transparent); content: "“"; font: 600 78px/1 "Cormorant Garamond",serif; }
.article-prose figure { margin: 35px 0; }
.article-prose figure img { display: block; width: 100%; height: auto; }
.article-prose figcaption { margin-top: 12px; color: var(--secondary); font-family: sans-serif; font-size: 12px; line-height: 1.65; }
.article-feature-section { margin-inline: -26px; padding: 32px 26px 4px; background: linear-gradient(135deg,color-mix(in srgb,var(--accent-soft) 50%,transparent),transparent 55%); }
.article-feature-section .prose-section-head { margin-top: 0; }

.article-numbers { display: grid; grid-template-columns: repeat(3,1fr); margin: 36px 0; border-block: 1px solid var(--ink); }
.article-numbers div { display: grid; gap: 5px; padding: 22px 15px; border-right: 1px solid var(--divider); text-align: center; }
.article-numbers div:last-child { border-right: 0; }
.article-numbers strong { color: var(--ink); font: 600 34px "Cormorant Garamond", serif; }
.article-numbers span { color: var(--secondary); font-family: sans-serif; font-size: 11px; }
.article-numbers--four { grid-template-columns: repeat(2,1fr); }
.article-wide-image { width: min(900px, calc(100vw - 64px)); margin: 28px 0 76px; transform: translateX(clamp(-90px, -6vw, -45px)); }
.article-wide-image img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; box-shadow: 0 20px 58px rgba(27,42,59,.13); }
.image-pair { display: grid; grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); align-items: end; gap: 16px; margin: 40px -55px; }
.image-pair figure { margin: 0; }
.image-pair img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
.image-pair__portrait { max-width: 340px; justify-self: end; }
.image-pair__landscape { align-self: end; }
.rule-list { margin: 40px 0; border-top: 1px solid var(--ink); }
.rule-list div { display: grid; grid-template-columns: 220px 1fr; gap: 25px; padding: 23px 0; border-bottom: 1px solid var(--divider); }
.rule-list b { color: var(--ink); font-size: 16px; }
.rule-list p { margin: 0; color: var(--secondary); font-family: sans-serif; font-size: 13px; line-height: 1.75; }
.article-closing-quote { margin: 0 -48px 76px !important; padding: 38px 43px 40px !important; background: var(--ink) !important; color: var(--paper) !important; border-left: 0 !important; font-size: 23px !important; }
.article-closing-quote::before { display: none; }
.article-closing-quote::after { color: color-mix(in srgb,var(--paper) 17%,transparent) !important; font-size: 110px !important; }
.article-closing-quote>span { display: block; margin-bottom: 16px; color: var(--accent); font: 9px "IBM Plex Mono",monospace; letter-spacing: .12em; }
.article-next > p { margin: 0 0 10px; color: var(--accent); font: 9px "IBM Plex Mono", monospace; letter-spacing: .1em; }
.article-next h2 { margin-bottom: 28px; }
.article-next ol { counter-reset: next; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.article-next li { counter-increment: next; display: grid; grid-template-columns: 45px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--divider); }
.article-next li::before { content: "0" counter(next); color: var(--accent); font: 10px "IBM Plex Mono", monospace; }
.article-end { position: relative; overflow: hidden; margin-top: 82px; padding: 29px 0 16px; border-top: 1px solid var(--ink); }
.article-end__mark { position: absolute; z-index: -1; right: 0; bottom: -38px; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb,var(--accent) 20%,transparent); font: 600 145px/.8 "Cormorant Garamond",serif; letter-spacing: -.07em; }
.article-end > span { color: var(--accent); font: 9px "IBM Plex Mono", monospace; letter-spacing: .1em; }
.article-end > p { margin: 12px 0 30px; color: var(--secondary); font-family: sans-serif; font-size: 12px; }
.article-end div { display: flex; justify-content: space-between; gap: 20px; }
.article-end a { font-family: sans-serif; font-size: 13px; text-underline-offset: 5px; }
.article-top { position: fixed; z-index: 30; right: 28px; bottom: 28px; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--divider); background: color-mix(in srgb, var(--paper) 90%, transparent); color: var(--ink); cursor: pointer; opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s; backdrop-filter: blur(10px); }
.article-top.is-visible { opacity: 1; transform: none; }
[data-theme="dark"] .article-cover img { filter: brightness(.9); }
[data-theme="dark"] .article-closing-quote { background: #e9edf0 !important; color: #11161a !important; }
@media(max-width:1100px){.article-layout{grid-template-columns:160px minmax(0,var(--article-measure));gap:34px;width:min(calc(100% - 32px),1030px)}.article-hero__grid{grid-template-columns:minmax(430px,.98fr) minmax(390px,1.02fr);gap:38px}.image-pair{margin-inline:-25px}.article-wide-image{width:min(820px,calc(100vw - 48px));transform:translateX(-50px)}}
@media(max-width:859px){.article-page main{padding-top:var(--header-h)}.article-header .desktop-nav{display:none}.article-hero{width:100%;min-height:0;padding:46px 20px 54px}.article-hero__grid{grid-template-columns:1fr;gap:34px}.article-hero__copy{padding:0}.article-back{margin-bottom:22px}.article-hero h1{font-size:clamp(36px,9vw,54px)}.article-cover{width:min(100%,650px);justify-self:start}.article-cover img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain}.article-hero__index{top:3%;right:-2%;bottom:auto;font-size:180px}.article-layout{display:block;width:100%;padding:48px 20px 84px}.article-toc{position:relative;top:auto;margin:0 auto 48px;max-width:var(--article-measure);padding:16px 0 0;background:transparent;border-bottom:0;backdrop-filter:none}.article-toc nav{grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--divider);border-left:1px solid var(--divider)}.article-toc a{padding:13px 10px;border-right:1px solid var(--divider);border-bottom:1px solid var(--divider)}.article-toc a::before{display:none}.article-toc a:hover,.article-toc a.is-active{padding-left:10px;background:var(--accent-soft)}.toc-line{display:none}.article-prose{max-width:var(--article-measure);margin:auto}.article-wide-image{width:100%;margin:28px 0 58px;transform:none}.image-pair{margin-inline:0}.article-prose blockquote{margin-inline:0}.article-feature-section{margin-inline:-10px;padding:27px 10px 4px}.article-closing-quote{margin-inline:0!important}}
@media(max-width:560px){.article-close{font-size:0}.article-close span{font-size:18px}.article-hero h1{font-size:34px}.article-deck{font-size:16px}.article-meta{gap:8px 12px}.article-layout{padding-inline:17px}.article-toc nav{grid-template-columns:repeat(2,1fr)}.article-prose{font-size:17px;line-height:1.86}.article-intro{font-size:20px!important;margin-bottom:42px!important}.article-summary{grid-template-columns:1fr;margin-bottom:58px}.prose-section-head{grid-template-columns:44px 1fr;gap:11px}.prose-section-head>span{font-size:30px}.article-prose h2{font-size:27px}.article-prose h3{margin-top:38px;font-size:20px}.section-lead{font-size:17px}.article-numbers{grid-template-columns:1fr}.article-numbers--four{grid-template-columns:1fr 1fr}.article-numbers div{border-right:0;border-bottom:1px solid var(--divider)}.article-numbers div:last-child{border-bottom:0}.image-pair{grid-template-columns:1fr;gap:24px;margin-inline:0}.image-pair__portrait{width:min(66%,240px);max-width:none;justify-self:center}.rule-list div{grid-template-columns:1fr;gap:8px;padding-block:18px}.article-closing-quote{padding:30px 23px!important;font-size:20px!important}.article-end__mark{font-size:100px}.article-top{right:16px;bottom:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.article-top{transition:none}}