.stories-page:not(.stories-site-shell) { color-scheme: dark; --stories-red:#e01919; --stories-ink:#0d0d0f; --stories-paper:#f4f1eb; --stories-muted:#aaa8a3; }
.stories-page:not(.stories-site-shell) * { box-sizing:border-box; }
.stories-page:not(.stories-site-shell) { margin:0; background:var(--stories-ink); color:#fff; font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.stories-page:not(.stories-site-shell) a { color:inherit; }
.stories-page .stories-header { min-height:84px; display:flex; align-items:center; gap:36px; padding:18px clamp(22px,5vw,78px); border-bottom:1px solid #2b2b2e; position:sticky; top:0; z-index:3; background:rgba(13,13,15,.96); }
.stories-page .stories-brand img { width:146px; height:auto; display:block; }
.stories-page .stories-header nav { display:flex; gap:24px; flex:1; }
.stories-page .stories-header nav a,.stories-page .stories-lang { text-decoration:none; color:#d9d7d2; font-size:14px; }
.stories-page .stories-header nav a[aria-current="page"] { color:#fff; }
.stories-page .stories-lang { border:1px solid #59595d; border-radius:999px; padding:9px 15px; }
.stories-page .stories-hero { min-height:48vh; display:grid; align-items:end; padding:80px clamp(22px,8vw,128px); background:linear-gradient(135deg,#0c0c0d 20%,#25100f 100%); border-bottom:1px solid #302625; }
.stories-page .stories-hero div { max-width:900px; }
.stories-page .stories-hero p,.stories-page .stories-empty p,.stories-page .story-title p,.stories-page .story-card p { color:#db554d; text-transform:uppercase; letter-spacing:.14em; font-size:12px; }
.stories-page .stories-hero h1 { font-size:clamp(54px,9vw,126px); line-height:.9; margin:18px 0 28px; letter-spacing:-.055em; }
.stories-page .stories-hero span { color:#cbc8c1; font-size:clamp(17px,2vw,24px); line-height:1.6; max-width:760px; display:block; }
.stories-page .stories-grid { padding:clamp(42px,7vw,110px) clamp(22px,8vw,128px); display:grid; grid-template-columns:repeat(12,1fr); gap:28px; }
.stories-page .story-card { grid-column:span 6; background:#171719; border:1px solid #2d2d31; overflow:hidden; }
.stories-page .story-card img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.stories-page .story-card > div { padding:30px; }
.stories-page .story-card h2 { font-size:clamp(27px,3vw,42px); line-height:1.08; margin:12px 0 18px; }
.stories-page .story-card h2 a,.stories-page .story-read { text-decoration:none; }
.stories-page .story-card span { color:#bdbab3; line-height:1.7; }
.stories-page .story-read { display:inline-block; margin-top:28px; color:#fff; border-bottom:2px solid var(--stories-red); padding-bottom:5px; }
.stories-page .stories-empty { grid-column:1/-1; border:1px solid #333337; padding:clamp(36px,6vw,80px); min-height:260px; }
.stories-page .stories-empty h2 { font-size:clamp(30px,5vw,60px); margin:18px 0; }
.stories-page .story-detail { background:var(--stories-paper); color:#171719; min-height:80vh; padding:clamp(44px,8vw,110px) 22px; }
.stories-page .story-detail article { max-width:920px; margin:0 auto; }
.stories-page .story-title { max-width:820px; margin:0 auto 54px; }
.stories-page .story-title h1 { font-size:clamp(44px,8vw,92px); line-height:.98; letter-spacing:-.045em; margin:20px 0 28px; }
.stories-page .story-title > span { color:#56534e; font-size:clamp(18px,2.2vw,25px); line-height:1.65; }
.stories-page .story-detail figure { margin:0 0 56px; }
.stories-page .story-detail figure img { width:100%; display:block; max-height:650px; object-fit:cover; }
.stories-page .story-body { max-width:720px; margin:0 auto; font-family:Georgia,"Noto Serif SC",serif; font-size:19px; line-height:1.9; }
.stories-page .story-body p { margin:0 0 1.5em; }
.stories-page .story-title h1,.stories-page .story-card h2,.stories-page .story-body,.stories-page .story-text-block { overflow-wrap:anywhere; }
.stories-page .story-text-block { white-space:pre-wrap; margin-bottom:2rem; }
.stories-page .story-blocks figure img { max-height:none; object-fit:contain; }
.stories-page .story-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:2rem 0; }
.stories-page .story-gallery figure,.stories-page .story-single-image figure { margin:0 0 2rem; }
.stories-page .story-blocks figcaption { font-size:14px; line-height:1.6; color:#625b53; padding:12px 0; }
.stories-page .story-blocks figcaption span { display:block; }
.stories-page .story-video video { display:block; width:100%; max-height:85vh; background:#131313; object-fit:contain; }
.stories-page .story-video-summary { white-space:pre-wrap; line-height:1.8; }
.stories-page .story-preview-notice { max-width:920px; margin:0 auto 32px; border:1px solid #a38758; background:#fff9e9; padding:20px; line-height:1.6; }
.stories-page .story-app-link { display:block; max-width:720px; margin:40px auto 0; font-weight:600; }
@media (max-width:560px) { .stories-page .story-gallery { grid-template-columns:1fr; gap:12px; } .stories-page .story-title h1 { font-size:clamp(32px,9vw,52px); line-height:1.15; } .stories-page .story-body { font-size:18px; } }
.stories-page > .stories-footer { display:flex; justify-content:space-between; gap:20px; padding:34px clamp(22px,5vw,78px); color:var(--stories-muted); border-top:1px solid #2b2b2e; font-size:13px; }
@media (max-width:760px) { .stories-page .stories-header { min-height:70px; gap:14px; padding:14px 18px; } .stories-page .stories-brand img{width:108px}.stories-page .stories-header nav a:not([aria-current="page"]){display:none}.stories-page .stories-lang{margin-left:auto}.stories-page .stories-hero{padding:56px 22px;min-height:42vh}.stories-page .stories-grid{padding:42px 18px}.stories-page .story-card{grid-column:1/-1}.stories-page .story-card>div{padding:24px}.stories-page .story-detail{padding:50px 18px}.stories-page .story-title{margin-bottom:36px}.stories-page > .stories-footer{flex-direction:column;padding:28px 20px} }

@media (max-width:760px) { .stories-page .stories-header nav a.stories-return { display:inline; white-space:nowrap; } }

/* CN stories share the existing public navigation, account drawer and footer. */
.stories-site-shell { padding-block-start:76px; }
.stories-site-shell [data-published-story-content] { --stories-red:var(--red); --stories-paper:#f4f1eb; --stories-muted:var(--muted); }
.stories-site-shell .stories-hero { min-height:0; padding:48px clamp(20px,5vw,72px) 32px; background:var(--bg); border-color:var(--line); }
.stories-site-shell .stories-hero > div { width:100%; max-width:var(--max); margin-inline:auto; }
.stories-site-shell .stories-hero h1,.stories-site-shell .story-title h1 { font-size:clamp(32px,4vw,56px); line-height:1.12; font-weight:900; letter-spacing:normal; margin:16px 0 24px; }
.stories-site-shell .stories-hero span { max-width:720px; font-size:18px; line-height:1.7; color:var(--muted); }
.stories-site-shell .stories-grid { box-sizing:content-box; width:auto; max-width:var(--max); margin-inline:auto; padding:0 clamp(20px,5vw,72px) 64px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.stories-site-shell .story-card { grid-column:auto; min-width:0; background:var(--panel); border-color:var(--line); border-radius:var(--radius); }
.stories-site-shell .story-card > div { padding:24px; }
.stories-site-shell .story-card h2 { font-size:24px; line-height:1.3; margin:12px 0 16px; }
.stories-site-shell .story-card p { color:var(--muted); font-size:14px; line-height:1.5; letter-spacing:normal; text-transform:none; }
.stories-site-shell .story-card span { font-size:16px; line-height:1.7; }
.stories-site-shell .story-read,.stories-site-shell .stories-empty a { min-height:44px; display:inline-flex; align-items:center; margin-top:16px; }
.stories-site-shell .stories-empty { grid-column:1/-1; min-height:0; padding:24px; border-color:var(--line); }
.stories-site-shell .stories-empty p { margin:0; color:var(--muted); font-size:16px; line-height:1.7; letter-spacing:normal; text-transform:none; }
.stories-site-shell .story-detail { padding:48px clamp(20px,5vw,72px) 64px; color:var(--dark-text); }
.stories-site-shell .story-title { max-width:920px; margin:0 auto 32px; }
.stories-site-shell .story-title p { color:#625b53; font-size:14px; line-height:1.5; letter-spacing:normal; text-transform:none; }
.stories-site-shell .story-title > span { max-width:720px; font-size:18px; line-height:1.7; }
.stories-site-shell .story-body { font-family:inherit; font-size:19px; line-height:1.9; }
.stories-site-shell .stories-context { max-width:920px; margin:0 auto 24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.stories-site-shell .stories-context-list { max-width:none; justify-content:flex-end; margin-bottom:0; }
.stories-site-shell .stories-context a { min-height:44px; display:inline-flex; align-items:center; text-decoration:none; }
@media (max-width:640px) {
 .stories-site-shell .stories-hero { padding-block:28px 24px; }
 .stories-site-shell .stories-hero h1,.stories-site-shell .story-title h1 { font-size:32px; line-height:1.18; }
 .stories-site-shell .stories-hero span,.stories-site-shell .story-title > span { font-size:16px; }
 .stories-site-shell .stories-grid { grid-template-columns:1fr; gap:20px; padding-bottom:40px; }
 .stories-site-shell .story-card > div,.stories-site-shell .stories-empty { padding:20px; }
 .stories-site-shell .story-card h2 { font-size:22px; line-height:1.35; }
 .stories-site-shell .story-detail { padding-block:28px 40px; }
 .stories-site-shell .story-body { font-size:18px; line-height:1.85; }
}
@media (max-width:240px) { .stories-site-shell { padding-block-start:112px; } }

.stories-page .stories-pagination { display:flex; flex-wrap:wrap; align-items:center; gap:16px; max-width:1180px; margin:0 auto; padding:0 clamp(20px,5vw,72px) 48px; }
.stories-page .stories-pagination a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; max-width:100%; padding:10px 18px; border:1px solid currentColor; border-radius:6px; color:inherit; text-decoration:none; overflow-wrap:anywhere; box-sizing:border-box; }
.stories-page .stories-pagination .stories-older { margin-left:auto; }
.stories-page .stories-pagination a:focus-visible { outline:3px solid currentColor; outline-offset:4px; }
.stories-page .story-card[id] { scroll-margin-top:100px; }
@media (max-width:360px) { .stories-page .stories-pagination a { flex:1 1 100%; } }