.article-page{background:var(--bg);color:var(--text);min-height:100vh}.article-bar{background:var(--accent);z-index:300;width:0;height:2px;transition:width .1s linear;position:fixed;top:0;left:0}.article-nav{z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);background:#f9f8f6f7;justify-content:space-between;align-items:center;padding:1.1rem clamp(1.25rem,4vw,3rem);display:flex;position:sticky;top:0}.article-nav-logo{font-family:var(--fe);color:var(--text);letter-spacing:.28em;font-size:1.25rem;font-weight:500}.article-nav-logo em{color:var(--accent);font-style:normal}.article-nav-back{font-family:var(--fn-ui);color:var(--text-muted);letter-spacing:.08em;font-size:.78rem;transition:color .2s}.article-nav-back:hover{color:var(--accent)}.article-hero{background:var(--portrait-bg);padding:clamp(3.5rem,8vw,5rem) clamp(1.25rem,4vw,3rem) clamp(2.5rem,6vw,4rem);position:relative;overflow:hidden}.article-hero:before{content:"HP";font-family:var(--fe);color:#ffffff0a;pointer-events:none;-webkit-user-select:none;user-select:none;font-size:clamp(6rem,18vw,14rem);font-weight:400;position:absolute;top:50%;right:-.5rem;transform:translateY(-50%)}.article-hero-inner{z-index:2;max-width:760px;margin:0 auto;position:relative}.article-cat{font-family:var(--fn-ui);color:var(--accent-soft);border-radius:var(--radius);letter-spacing:.18em;border:1px solid #8a726259;margin-bottom:1.5rem;padding:.3rem .95rem;font-size:.7rem;font-weight:500;display:inline-block}.article-hero-title{font-family:var(--fn);color:var(--bg);letter-spacing:.06em;margin-bottom:1.5rem;font-size:clamp(1.45rem,3.5vw,2.2rem);font-weight:600;line-height:1.55}.article-meta{flex-wrap:wrap;align-items:center;gap:1.5rem;display:flex}.meta-author{align-items:center;gap:.6rem;display:flex}.meta-avatar{width:32px;height:32px;font-family:var(--fn-ui);color:var(--accent-soft);background:#ffffff14;border:1px solid #fff3;border-radius:50%;justify-content:center;align-items:center;font-size:.7rem;font-weight:500;display:flex}.meta-name{font-family:var(--fn-ui);color:#f9f8f6cc;font-size:.82rem}.meta-date,.meta-read{font-family:var(--fe);color:#f9f8f673;letter-spacing:.1em;font-size:.75rem}.article-layout{grid-template-columns:1fr 280px;align-items:start;gap:4rem;max-width:1100px;margin:0 auto;padding:clamp(2.5rem,6vw,4rem) clamp(1.25rem,4vw,3rem);display:grid}.article-body{font-family:var(--fn)}.article-lead{background:var(--bg-soft);border-left:3px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;margin-bottom:3rem;padding:1.5rem 1.8rem}.article-lead p{color:var(--text);margin:0;font-size:.95rem;line-height:2}.article-toc{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:3rem;padding:1.5rem 1.8rem}.article-toc-title{font-family:var(--fn-ui);color:var(--text);letter-spacing:.1em;align-items:center;gap:.5rem;margin-bottom:.8rem;font-size:.8rem;font-weight:500;display:flex}.article-toc ol{flex-direction:column;gap:.4rem;margin:0;padding:0;list-style:none;display:flex}.article-toc li{border-left:2px solid var(--line);padding-left:1rem;font-size:.85rem}.article-toc a{color:var(--accent-soft);transition:color .2s}.article-toc a:hover{color:var(--accent)}.article-body h2{font-family:var(--fn);color:var(--text);border-bottom:2px solid var(--text);letter-spacing:.06em;margin:3rem 0 1.2rem;padding-bottom:.7rem;font-size:1.3rem;font-weight:600;position:relative}.article-body h2:after{content:"";background:var(--accent);width:3rem;height:2px;position:absolute;bottom:-2px;left:0}.article-body h3{color:var(--text);border-left:3px solid var(--accent);letter-spacing:.04em;margin:2rem 0 .8rem;padding-left:.9rem;font-size:1.05rem;font-weight:600}.article-body p{color:var(--text-muted);margin-bottom:1.2rem;font-size:.95rem;line-height:2}.article-body strong{color:var(--text);font-weight:600}.article-story{background:var(--portrait-bg);border-radius:var(--radius);margin:2rem 0;padding:2rem}.article-story-label{font-family:var(--fn-ui);color:#f9f8f6b3;letter-spacing:.18em;margin-bottom:1rem;font-size:.68rem;font-weight:500;display:block}.article-story p{color:#f9f8f6e0;margin-bottom:.8rem;font-size:.9rem;line-height:2}.article-story p:last-child{margin-bottom:0}.article-judge-grid{grid-template-columns:1fr 1fr;gap:1.2rem;margin:2rem 0;display:grid}.article-judge-card{border-radius:var(--radius);padding:1.5rem}.article-judge-card.need{background:#6b53440f;border:1px solid #6b534433}.article-judge-card.noneed{background:#a030300a;border:1px solid #a0303026}.article-judge-label{font-family:var(--fn-ui);letter-spacing:.15em;margin-bottom:.8rem;font-size:.7rem;font-weight:700;display:block}.article-judge-card.need .article-judge-label{color:var(--accent)}.article-judge-card.noneed .article-judge-label{color:#a03030}.article-judge-list{flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.article-judge-list li{color:var(--text-muted);padding-left:1.1rem;font-size:.88rem;line-height:1.7;position:relative}.article-judge-list li:before{content:"";border-radius:50%;width:6px;height:6px;position:absolute;top:.65em;left:0}.article-judge-card.need .article-judge-list li:before{background:var(--accent)}.article-judge-card.noneed .article-judge-list li:before{background:#c04040}.article-case{background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--radius);margin:2rem 0;padding:2rem 2rem 2rem 1.5rem;transition:box-shadow .2s;position:relative}.article-case:hover{box-shadow:var(--shadow-soft)}.article-case-num{font-family:var(--fe);color:var(--bg);background:var(--text);border-radius:var(--radius);letter-spacing:.15em;padding:.25rem .9rem;font-size:.7rem;position:absolute;top:-14px;left:1.5rem}.article-case-title{color:var(--text);margin-bottom:.8rem;font-size:1.05rem;font-weight:600}.article-case-body{color:var(--text-muted);margin:0;font-size:.9rem;line-height:2}.article-callout{border:1px solid var(--line);border-radius:var(--radius);color:var(--text);background:#2c2a290a;margin:1.5rem 0;padding:1.3rem 1.5rem;font-size:.88rem;line-height:1.9}.article-table{border-collapse:collapse;width:100%;margin:1.5rem 0;font-size:.88rem}.article-table th{background:var(--text);color:var(--bg);font-family:var(--fn-ui);text-align:left;letter-spacing:.05em;padding:.7rem 1rem;font-size:.8rem;font-weight:500}.article-table td{border-bottom:1px solid var(--line);color:var(--text-muted);padding:.7rem 1rem;line-height:1.7}.article-table tr:nth-child(2n) td{background:var(--bg-soft)}.article-ok{color:#2a7a50;font-weight:500}.article-cta{background:var(--portrait-bg);border-radius:var(--radius);text-align:center;margin:3rem 0;padding:2.5rem 2rem}.article-cta h3{color:var(--bg);border:none;margin:0 0 .7rem;padding:0;font-size:1.1rem;font-weight:600}.article-cta p{color:#f9f8f6a6;margin-bottom:1.5rem;font-size:.85rem}.article-author{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);align-items:flex-start;gap:1.2rem;margin-top:3rem;padding:1.8rem;display:flex}.article-author-avatar{background:var(--text);width:56px;height:56px;font-family:var(--fn-ui);color:var(--accent-soft);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:1rem;font-weight:500;display:flex}.article-author-name{color:var(--text);margin-bottom:.3rem;font-size:.95rem;font-weight:600}.article-author-bio{color:var(--text-muted);margin-bottom:.5rem;font-size:.82rem;line-height:1.8}.article-author-link{font-family:var(--fn-ui);color:var(--accent-soft);border-bottom:1px solid #8a726240;font-size:.78rem}.article-sidebar{position:sticky;top:80px}.article-sb-block{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:1.5rem;padding:1.5rem}.article-sb-title{font-family:var(--fn-ui);color:var(--text);letter-spacing:.1em;border-bottom:1px solid var(--line);margin-bottom:1rem;padding-bottom:.6rem;font-size:.78rem;font-weight:700}.article-sb-cta{background:var(--portrait-bg);border-radius:var(--radius);text-align:center;margin-bottom:1.5rem;padding:1.5rem}.article-sb-cta p{color:#f9f8f6bf;margin-bottom:1rem;font-size:.82rem;line-height:1.8}.article-sb-cta .btn{text-align:center;width:100%;display:block}.article-sb-toc{flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.article-sb-toc li{border-left:2px solid var(--line);padding-left:.8rem;font-size:.82rem;transition:border-color .2s}.article-sb-toc li:hover{border-color:var(--accent)}.article-sb-toc a{color:var(--text-muted);transition:color .2s}.article-sb-toc a:hover{color:var(--text)}.article-related{flex-direction:column;gap:.8rem;margin:0;padding:0;list-style:none;display:flex}.article-related a{color:var(--accent-soft);font-size:.82rem;line-height:1.6;transition:color .2s}.article-related a:hover{color:var(--accent)}.article-related-cat{font-family:var(--fn-ui);color:var(--accent-soft);border-radius:var(--radius);border:1px solid #8a72624d;margin-right:.4rem;padding:.1rem .5rem;font-size:.65rem;display:inline-block}.article-footer{background:var(--portrait-bg);border-top:1px solid #ffffff0f;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-top:4rem;padding:2.5rem clamp(1.25rem,4vw,3rem);display:flex}.article-footer-logo{font-family:var(--fe);color:#f9f8f659;letter-spacing:.28em;font-size:1.2rem;font-weight:400}.article-footer-logo em{color:var(--accent-soft);opacity:.7;font-style:normal}.article-footer-copy{font-family:var(--fn-ui);color:#f9f8f640;font-size:.68rem}@media (max-width:860px){.article-layout{grid-template-columns:1fr;gap:2.5rem}.article-sidebar{position:static}.article-judge-grid{grid-template-columns:1fr}.article-footer{text-align:center;flex-direction:column}}