/* 17c editorial interface — original CSS, no framework dependency */
:root{--brand:#D9364F;--brand-dark:#B72C43;--blue:#54718C;--dark:#20252D;--bg:#FAFAF8;--soft:#F0F2F4;--ink:#252B33;--muted:#66717D;--line:#DEE2E5;--white:#fff;--radius:6px;--measure:1160px;--ease:cubic-bezier(.2,.72,.2,1)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.76 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:hover{color:var(--brand-dark)}
button{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--brand);outline-offset:4px}
::selection{background:#f7ccd3;color:#461e28}
.wrap{width:min(calc(100% - 52px),var(--measure));margin-inline:auto}
.skip-link{position:fixed;z-index:300;top:-80px;left:16px;padding:10px 15px;background:var(--dark);color:#fff;border-radius:4px}
.skip-link:focus{top:10px}
.topline{background:var(--dark);color:#bfc7d0;font-size:11px;font-weight:600;letter-spacing:.045em}
.topflex{height:32px;display:flex;justify-content:space-between;align-items:center;gap:18px}
.site-header{position:relative;z-index:25;background:#fff;border-bottom:1px solid var(--line)}
.header-row{min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.site-brand{display:inline-flex;gap:10px;align-items:center;flex-shrink:0;color:var(--dark)}
.site-brand img{width:42px;height:42px;object-fit:contain}
.brand-word{font-size:34px;letter-spacing:-.095em;line-height:1;font-weight:950}
.brand-word span,.footer-brand span,.entry-mark span,.floating-index b span{color:var(--brand)}
.primary-nav{display:flex;align-items:center;gap:36px}
.primary-nav a{display:inline-flex;min-height:45px;align-items:center;white-space:nowrap;font-size:14px;font-weight:700;position:relative}
.primary-nav a::after{position:absolute;content:"";bottom:4px;left:0;width:0;height:2px;background:var(--brand);transition:width .18s}
.primary-nav a:hover::after,.primary-nav a[aria-current="page"]::after{width:100%}
.nav-button{display:none;background:#fff;border:1px solid var(--line);border-radius:4px;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer}
.nav-button span{width:18px;height:2px;background:var(--ink);transition:transform .22s,opacity .22s}
.nav-button[aria-expanded="true"] span:first-child{transform:translateY(7px) rotate(45deg)}
.nav-button[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-button[aria-expanded="true"] span:last-child{transform:translateY(-7px) rotate(-45deg)}
.lead-panel{background:linear-gradient(115deg,#fff 0%,#fff 47%,#f6f7f7 47%,#f6f7f7 100%);border-bottom:1px solid var(--line);overflow:hidden}
.lead-grid{min-height:490px;display:grid;grid-template-columns:1fr 1.01fr;align-items:center;gap:50px;padding-top:48px;padding-bottom:52px}
.lead-copy{position:relative;z-index:1;padding:12px 0 8px}
.eyebrow,.section-label{display:block;color:var(--brand-dark);font-weight:850;font-size:11px;letter-spacing:.12em;line-height:1.5}
.eyebrow{display:flex;align-items:center;gap:9px}
.eyebrow-dot{width:7px;height:7px;background:var(--brand);border-radius:50%;box-shadow:0 0 0 4px #fbe7eb}
.lead-copy h1{margin:23px 0 19px;color:var(--dark);font-size:clamp(37px,4.4vw,58px);font-weight:950;line-height:1.2;letter-spacing:-.065em}
.lead-copy h1 em{display:block;margin-top:9px;font-style:normal;font-size:clamp(27px,3vw,42px);letter-spacing:-.055em}
.lead-intro{max-width:530px;font-size:16px;color:#4e5966;line-height:1.95;margin:0 0 29px}
.lead-links{display:flex;gap:12px;flex-wrap:wrap}
.btn-primary,.btn-outline{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:24px;padding:11px 20px;font-size:13px;font-weight:800;line-height:1.5;border:1px solid var(--brand);border-radius:4px;transition:background .18s,transform .18s,border-color .18s}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff;transform:translateY(-1px)}
.btn-outline{color:var(--brand-dark);background:transparent}
.btn-outline:hover{color:#fff;background:var(--brand-dark);border-color:var(--brand-dark)}
.lead-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}
.lead-tags span{padding:3px 11px;border:1px solid #dce1e5;background:rgba(255,255,255,.7);color:var(--muted);font-size:11px;font-weight:650}
.lead-visual{min-width:0;position:relative;padding:14px 12px 20px 0}
.lead-visual::before{content:"";position:absolute;width:220px;height:220px;right:-48px;top:-36px;background:repeating-linear-gradient(45deg,rgba(217,54,79,.085) 0 1px,transparent 1px 13px);pointer-events:none}
.lead-photo{display:block;position:relative;overflow:hidden;aspect-ratio:1.32;background:#d6dce0;border-radius:4px}
.lead-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.lead-photo:hover img{transform:scale(1.035)}
.lead-image-overlay{position:absolute;inset:auto 0 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:8px;background:linear-gradient(transparent,rgba(15,20,28,.92));padding:80px 25px 22px;color:#fff}
.lead-image-overlay small{font-size:11px;color:#f7c7ce;font-weight:800;letter-spacing:.1em}
.lead-image-overlay strong{max-width:440px;font-size:23px;line-height:1.38;letter-spacing:-.015em;font-weight:850}
.lead-image-overlay>span{color:#fff;font-size:12px;font-weight:750}
.floating-index{display:flex;align-items:center;gap:14px;position:absolute;right:-10px;bottom:0;background:#fff;box-shadow:0 12px 35px #25324622;padding:11px 16px;border-left:3px solid var(--brand)}
.floating-index b{font-size:22px;letter-spacing:-.07em;line-height:1}
.floating-index>span{font-size:10px;letter-spacing:.09em;color:var(--muted);font-weight:800}
.body-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:48px;align-items:start;padding-top:55px;padding-bottom:80px}
.content-column{min-width:0}
.editorial-section{padding-bottom:56px;margin-bottom:52px;border-bottom:1px solid var(--line);scroll-margin-top:60px}
.editorial-section:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:25px}
.section-heading h2{color:var(--dark);margin:6px 0 0;font-size:clamp(22px,2.2vw,29px);font-weight:900;line-height:1.35;letter-spacing:-.04em}
.section-heading p{max-width:220px;font-size:12px;color:var(--muted);margin:0 0 2px;line-height:1.65}
.feature-story{display:grid;grid-template-columns:1.06fr .94fr;min-height:270px;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:5px}
.feature-copy{padding:26px;align-self:center}
.inline-tag{display:inline-flex;background:#fae7eb;color:var(--brand-dark);font-size:11px;font-weight:850;padding:3px 8px;line-height:1.65}
.feature-copy h3{font-size:23px;letter-spacing:-.03em;line-height:1.46;margin:12px 0 9px;font-weight:850}
.feature-copy p{font-size:13px;line-height:1.9;color:var(--muted);margin:0 0 13px}
.text-link{font-weight:800;font-size:12px;color:var(--brand-dark);display:inline-flex;gap:6px;align-items:center}
.text-link:hover{text-decoration:underline;text-underline-offset:4px}
.feature-img{overflow:hidden;background:#e3e8e8}
.feature-img img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease)}
.feature-img:hover img{transform:scale(1.045)}
.observation-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:20px;border:1px solid var(--line);background:var(--soft)}
.observation-strip>div{padding:19px 18px 15px;min-width:0}
.observation-strip>div+div{border-left:1px solid #d6dce1}
.observation-strip b{color:var(--brand-dark);font-size:11px;display:block;line-height:1.2;margin-bottom:10px}
.observation-strip strong{color:var(--dark);font-size:14px;font-weight:850}
.observation-strip p{color:var(--muted);margin:5px 0 0;font-size:11px;line-height:1.6}
.media-focus{display:grid;grid-template-columns:1fr 1fr;gap:23px;align-items:center}
.media-img{position:relative;overflow:hidden;aspect-ratio:1.26;background:#d5dce0;border-radius:4px}
.media-img img{height:100%;width:100%;object-fit:cover;transition:transform .55s var(--ease)}
.media-img:hover img{transform:scale(1.04)}
.play-symbol{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:57px;height:57px;border:2px solid rgba(255,255,255,.9);border-radius:50%;display:grid;place-items:center;font-size:18px;color:#fff;background:rgba(32,37,45,.63);pointer-events:none}
.media-text h3{font-size:23px;line-height:1.44;letter-spacing:-.025em;margin:12px 0 10px}
.media-text>p{color:var(--muted);font-size:13px;line-height:1.86;margin:0 0 12px}
.check-list{list-style:none;padding:0;margin:0 0 15px}
.check-list li{font-size:12px;padding:5px 0 5px 21px;position:relative;border-top:1px dashed var(--line)}
.check-list li::before{content:"✓";position:absolute;left:0;color:var(--brand-dark);font-weight:900}
.story-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.story-card{background:#fff;border:1px solid var(--line);border-radius:5px;overflow:hidden;min-width:0;transition:border-color .25s,transform .25s}
.story-card:hover{border-color:#d9a9b2;transform:translateY(-2px)}
.story-cover{display:block;aspect-ratio:1.7;position:relative;overflow:hidden;background:#e4e6e9}
.story-cover img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.story-cover:hover img{transform:scale(1.05)}
.story-cover-label{position:absolute;left:12px;bottom:12px;padding:2px 10px;background:rgba(32,37,45,.86);font-size:11px;font-weight:800;color:#fff}
.story-body{padding:19px 19px 22px}
.story-meta{display:flex;gap:8px;font-size:10px;letter-spacing:.015em;color:var(--muted);font-weight:700}
.story-meta span:first-child{color:var(--brand-dark)}
.story-body h3{font-size:18px;line-height:1.55;letter-spacing:-.02em;margin:7px 0 8px}
.story-body p{font-size:12px;line-height:1.9;margin:0 0 13px;color:var(--muted)}
.entry-section{background:#fff;border:1px solid var(--line)!important;border-top:3px solid var(--brand)!important;border-radius:4px;padding:27px!important;margin-bottom:0!important}
.entry-content{display:grid;grid-template-columns:120px 1fr;gap:30px;align-items:start}
.entry-mark{width:116px;height:116px;display:grid;place-items:center;background:var(--dark);color:#fff;font-size:49px;font-weight:950;letter-spacing:-.12em;line-height:1}
.entry-text p{font-size:13px;margin:0 0 13px;color:#56616e;line-height:2}
.entry-text strong{color:var(--dark)}
.entry-text p a{color:var(--brand-dark);font-weight:850;overflow-wrap:anywhere}
.entry-text p a:hover{text-decoration:underline}
.sidebar{position:sticky;top:25px;display:flex;flex-direction:column;gap:20px}
.side-box{background:#fff;border:1px solid var(--line);padding:24px 21px 26px}
.side-box h2{font-size:18px;letter-spacing:-.03em;line-height:1.4;margin:9px 0 16px}
.side-box>p{font-size:12px;line-height:1.95;color:var(--muted)}
.side-reading{padding:0;margin:0;list-style:none;counter-reset:reading}
.side-reading li{counter-increment:reading;border-top:1px solid var(--line)}
.side-reading li a{padding:13px 0;display:grid;grid-template-columns:27px 1fr;gap:7px;font-size:12px;font-weight:730;line-height:1.65}
.side-reading li a::before{content:counter(reading,decimal-leading-zero);font-size:10px;color:var(--brand-dark);font-weight:850;margin-top:2px}
.side-quote{background:var(--dark);color:#fff;padding:26px 22px 28px;border-top:3px solid var(--brand)}
.side-quote span{color:#df9daa;font-size:10px;font-weight:800;letter-spacing:.12em}
.side-quote p{font-size:18px;line-height:1.7;font-weight:790;letter-spacing:-.03em;margin:14px 0 0}
.site-footer{background:#20252D;color:#d9dce0;padding-top:43px}
.footer-top{display:flex;justify-content:space-between;gap:35px;align-items:flex-start;padding-bottom:38px}
.footer-brand{font-size:33px;letter-spacing:-.09em;font-weight:950;line-height:1;color:#fff}
.footer-top p{color:#aab1bb;font-size:12px;line-height:1.8;max-width:350px;margin:12px 0 0}
.footer-top nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px 23px;max-width:450px;padding-top:8px}
.footer-top nav a{font-size:12px;font-weight:700;color:#d3d8de}
.footer-top nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}
.footer-bottom{border-top:1px solid #41464e;padding:19px 0 24px;display:flex;justify-content:space-between;gap:20px;font-size:11px;color:#9ea8b5}
/* Article reading experience: narrower measure, differentiated hierarchy, quiet page rail */
.article-shell{padding-top:24px;padding-bottom:90px}
.breadcrumb{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted);margin:0 0 33px}
.breadcrumb a{font-weight:750;color:var(--blue)}
.breadcrumb a:hover{color:var(--brand-dark)}
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:62px;align-items:start}
.article-main{min-width:0}
.article-eyebrow{color:var(--brand-dark);letter-spacing:.11em;font-size:11px;font-weight:900}
.article-head{margin-bottom:28px}
.article-head h1{font-size:clamp(30px,3.35vw,45px);line-height:1.35;letter-spacing:-.055em;font-weight:930;color:var(--dark);margin:17px 0 19px}
.article-deck{font-size:17px;line-height:1.9;color:#52606c;margin:0 0 24px}
.article-meta{display:flex;gap:9px 19px;flex-wrap:wrap;color:#72808a;font-size:11px;font-weight:700;border-top:1px solid var(--line);padding-top:17px}
.article-meta span+span{position:relative}
.article-meta span+span::before{content:"·";position:absolute;left:-12px;color:#9ba7af}
.article-hero{margin:0 0 27px;background:#e5e8ea;aspect-ratio:1.78;overflow:hidden;border-radius:4px}
.article-hero img{width:100%;height:100%;object-fit:cover}
.article-introduction{background:#f2f3f3;border-left:3px solid var(--brand);padding:18px 20px 20px;margin:0 0 30px}
.article-introduction strong{font-size:12px;color:var(--brand-dark)}
.article-introduction p{margin:6px 0 0;font-size:14px;line-height:1.9;color:#515e69}
.article-prose{max-width:740px}
.article-prose section{margin:0 0 35px}
.article-prose section h2{color:var(--dark);font-size:23px;line-height:1.55;margin:0 0 15px;font-weight:850;letter-spacing:-.025em;padding-left:16px;border-left:4px solid var(--brand)}
.article-prose section p{font-size:16px;line-height:2.15;margin:0 0 16px;color:#3d4650;overflow-wrap:anywhere}
.article-prose section p:first-of-type::first-letter{font-weight:650}
.article-end{display:flex;justify-content:space-between;align-items:center;gap:18px;border-top:1px solid var(--line);padding:20px 0;color:var(--muted);font-size:11px;letter-spacing:.05em}
.article-end a{color:var(--brand-dark);font-weight:800;font-size:12px}
.article-aside{position:sticky;top:22px;display:flex;flex-direction:column;gap:19px}
.related-list>a{padding:13px 0;display:block;border-top:1px solid var(--line)}
.related-list>a span{display:block;color:var(--blue);font-size:10px;font-weight:800;margin-bottom:3px}
.related-list>a strong{display:block;line-height:1.6;font-size:13px;font-weight:800}
.error-page{text-align:center;min-height:62vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:80px 0}
.error-page h1{font-size:clamp(29px,4vw,46px);margin:16px 0 0;line-height:1.3}
.error-page p{max-width:520px;color:var(--muted);margin:18px auto 26px;font-size:14px}
/* Desktop sizes and density */
@media(min-width:1380px){:root{--measure:1210px}.lead-grid{min-height:510px}.body-layout{grid-template-columns:minmax(0,1fr) 270px;gap:54px}.lead-photo{aspect-ratio:1.37}}
@media(max-width:1090px){.primary-nav{gap:20px}.lead-grid{gap:30px}.body-layout{gap:26px;grid-template-columns:minmax(0,1fr) 235px}.article-grid{gap:30px;grid-template-columns:minmax(0,1fr) 235px}.media-focus{gap:18px}.section-heading p{display:none}}
@media(max-width:900px){.lead-grid{grid-template-columns:1fr 1fr;gap:23px;min-height:400px}.lead-copy h1{font-size:40px}.lead-copy h1 em{font-size:30px}.lead-intro{font-size:14px}.floating-index{right:0}.body-layout{display:block}.sidebar{position:static;display:grid;grid-template-columns:1fr 1fr;gap:17px;margin-top:52px}.sidebar>.side-box:last-child{grid-column:1/-1}.article-grid{grid-template-columns:1fr}.article-aside{position:static;display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:15px}.article-prose{max-width:100%}}
@media(max-width:760px){html{scroll-padding-top:18px}.wrap{width:min(calc(100% - 34px),var(--measure))}.topline-right{display:none}.topflex{justify-content:center}.header-row{min-height:65px}.site-brand img{width:36px;height:36px}.brand-word{font-size:30px}.nav-button{display:flex}.primary-nav{display:flex;position:absolute;left:0;right:0;top:100%;padding:8px 17px 15px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 12px 18px #141b2520;flex-direction:column;align-items:stretch;gap:0;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(-7px);transition:transform .18s,opacity .18s,visibility .18s}.primary-nav.is-open{visibility:visible;opacity:1;pointer-events:auto;transform:translateY(0)}.primary-nav a{font-size:14px;padding:9px 8px;border-bottom:1px solid #edf0f2}.primary-nav a::after{display:none}.lead-panel{background:#fff}.lead-grid{display:flex;flex-direction:column;align-items:stretch;gap:15px;min-height:0;padding-top:30px;padding-bottom:30px}.lead-copy{padding:0}.lead-copy h1{font-size:42px;margin:16px 0 14px}.lead-copy h1 em{font-size:30px}.lead-intro{font-size:14px;margin-bottom:20px}.lead-tags{margin-top:18px}.lead-visual{padding:0 0 15px}.lead-photo{aspect-ratio:1.55}.floating-index{right:0;bottom:0}.lead-image-overlay{padding:60px 17px 16px}.lead-image-overlay strong{font-size:19px}.body-layout{padding-top:34px;padding-bottom:52px}.editorial-section{padding-bottom:35px;margin-bottom:32px}.section-heading{margin-bottom:18px}.section-heading h2{font-size:23px}.feature-copy{padding:20px}.feature-copy h3{font-size:20px}.media-text h3{font-size:21px}.entry-section{padding:20px!important}.entry-content{grid-template-columns:82px 1fr;gap:17px}.entry-mark{width:80px;height:80px;font-size:37px}.article-shell{padding-top:19px;padding-bottom:55px}.breadcrumb{margin-bottom:25px}.article-head h1{font-size:33px}.article-deck{font-size:15px}.article-prose section h2{font-size:21px}.article-prose section p{font-size:15px}.footer-top,.footer-bottom{flex-direction:column}.footer-top{gap:22px}.footer-top nav{justify-content:start}.footer-bottom{gap:6px}}
@media(max-width:560px){.lead-copy h1{font-size:39px}.lead-copy h1 em{font-size:26px}.lead-links{gap:9px}.btn-primary,.btn-outline{padding:10px 14px;gap:12px;font-size:12px}.feature-story{grid-template-columns:1fr}.feature-img{grid-row:1;aspect-ratio:1.65}.feature-copy{padding:19px}.observation-strip{grid-template-columns:1fr}.observation-strip>div{display:grid;grid-template-columns:34px 1fr;gap:0 10px;padding:12px 16px}.observation-strip>div+div{border-left:0;border-top:1px solid #d6dce1}.observation-strip b{grid-row:1/3;margin:5px 0 0}.observation-strip strong{font-size:13px}.observation-strip p{margin:2px 0 0}.media-focus{display:block}.media-img{display:block;aspect-ratio:1.7;margin-bottom:17px}.media-text{padding:0 1px}.story-grid{grid-template-columns:1fr}.story-cover{aspect-ratio:1.9}.story-body{padding:15px 16px 17px}.entry-content{grid-template-columns:1fr;gap:14px}.entry-mark{width:68px;height:68px;font-size:31px}.sidebar,.article-aside{display:block}.sidebar>*+*,.article-aside>*+*{margin-top:15px}.sidebar>.side-box:last-child{grid-column:auto}.section-heading h2{font-size:22px}.article-meta{gap:5px 15px}.article-head h1{font-size:30px}.article-hero{aspect-ratio:1.5}.article-prose section p{line-height:2}.article-end{align-items:flex-start;flex-direction:column}.footer-top nav{gap:12px 17px}}
@media(max-width:350px){.wrap{width:calc(100% - 26px)}.lead-copy h1{font-size:34px}.lead-copy h1 em{font-size:23px}.lead-tags{gap:6px}.lead-tags span{font-size:10px;padding:2px 7px}.floating-index{padding:8px 11px}.floating-index>span{font-size:9px}.lead-image-overlay strong{font-size:17px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
@media print{.topline,.site-header,.site-footer,.sidebar,.article-aside,.nav-button,.btn-primary,.btn-outline{display:none!important}.wrap{width:100%}body{color:#000;background:#fff;font-size:12pt}.article-grid{display:block}.article-head h1{font-size:26pt}.article-prose p{color:#000}.article-hero{max-height:340px}}
