/* 场边观察 — one visual language, from the frame to the reading index. */
:root{--paper:#f2efe8;--ink:#201e1c;--muted:#69645f;--red:#bd3e29;--line:#ccc5bb;--night:#181b1c;--warm:#ff764f}
body{background:var(--paper);color:var(--ink)}.site-header{max-width:none;width:calc(100% - 100px);padding:22px 0;border-bottom:1px solid var(--line)}.brand{font-size:24px;letter-spacing:-.06em;gap:12px}.brand-mark{width:43px;height:37px;color:var(--red)}.brand small{font-size:10px;letter-spacing:.22em}.site-header nav{gap:34px;font-size:13px}.site-header a:hover{text-decoration:none;color:var(--red)}
.motion-home main{max-width:none;width:100%;margin:0}.cinema-cover{background:var(--night);color:var(--paper);padding:0 50px 34px;overflow:clip}.cover-top{max-width:1340px;margin:auto}.issue-line{display:flex;justify-content:space-between;gap:20px;padding:23px 0 12px;font:10px/1.6 monospace;letter-spacing:.16em;color:#b4b4a9}.title-row{display:flex;align-items:center;justify-content:space-between;gap:25px}.title-row h1{font:850 clamp(70px,9.3vw,144px)/1.15 "PingFang SC","Microsoft YaHei",sans-serif;letter-spacing:-.065em;white-space:nowrap;margin-left:-.025em}.title-row h1>span{color:var(--warm)}.title-aside{font:24px/1.65 "Songti SC",serif;margin-right:5vw;padding-left:25px;border-left:1px solid #777b71}.intro-row{display:flex;align-items:center;justify-content:space-between;gap:55px;margin:22px 0 32px}.intro-row .lead{max-width:680px;color:#c1c3b9;font-size:14px;line-height:1.85}.hero-entry{display:flex;align-items:center;gap:25px;flex-shrink:0}.button{border-radius:0;min-height:50px;position:relative;isolation:isolate;transition:background .2s,color .2s}.button.primary{background:var(--red);border-color:var(--red);color:#fff}.cinema-cover .primary{background:var(--warm);color:#201e1c;border-color:var(--warm)}.button::after{content:'';position:absolute;inset:5px;border:1px solid currentColor;clip-path:polygon(0 0,0 0,0 100%,0 100%);opacity:.6;transition:clip-path .25s;pointer-events:none}.button:hover::after,.button:focus-visible::after{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}.button span{transition:transform .2s}.button:hover span{transform:translate(3px,-3px)}.text-link{font-size:12px;padding-block:12px;border-bottom:1px solid #86897e}.cinema-cover a:focus-visible,.cinema-cover button:focus-visible{outline-color:#ffb59a}.cinema-cover .text-link{white-space:nowrap}
.story-track{position:relative;max-width:1340px;margin:auto}.story-sticky{position:relative;--progress:0;--spread:0;--dock:0}.scene-meta{display:flex;align-items:center;justify-content:space-between;min-height:40px;font:10px/1.5 monospace;letter-spacing:.12em;color:#b8b8ac}.motion-switch{color:#deded4;background:transparent;border:1px solid #61675d;font-size:11px;padding:9px 12px;min-height:40px;letter-spacing:0}.motion-switch:hover{background:#ffffff12}.cinema-scene{position:relative;padding:14px 16px 0;isolation:isolate}.scene-photo{position:relative;max-width:1130px;margin:auto;transform:scale(calc(.96 + var(--spread)*.04 - var(--dock)*.035));transform-origin:center;will-change:transform}.scene-photo img{width:100%;height:auto;aspect-ratio:1600/901;object-fit:contain}.cinema-scene figcaption{max-width:1130px;margin:10px auto 0;font-size:11px;line-height:1.7;color:#aaaec2}.frame-webgl{position:absolute;inset:0 0 25px;z-index:2;pointer-events:none}.frame-webgl canvas{display:block;width:100%;height:100%}.frame-fallback{position:absolute;inset:15px max(16px,calc((100% - 1130px)/2)) 30px;pointer-events:none;z-index:2}.frame-fallback i{position:absolute;width:120px;height:80px;border-color:var(--warm);border-style:solid;border-width:4px 0 0 4px;top:-8px;left:-8px}.frame-fallback i:last-child{top:auto;left:auto;bottom:-8px;right:-8px;transform:rotate(180deg);width:80px;height:60px}.frame-ready .frame-fallback{visibility:hidden}.story-foot{display:flex;align-items:center;gap:45px;padding:20px 16px 18px;max-width:1162px;margin:auto}.story-heading{display:flex;align-items:center;gap:17px;font-size:12px;line-height:1.8;min-width:230px;color:#a9ada2}.story-heading b{font-weight:500;color:#efeee5}.chapter-counter{color:var(--warm);font:48px/.9 Georgia,serif;min-width:52px}.story-steps{list-style:none;display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:25px;padding:0;margin:0;flex:1}.story-steps a{display:block;text-decoration:none;border-top:1px solid #555b50;padding-top:12px}.story-steps small{font:10px monospace;color:#91998b;letter-spacing:.1em}.story-steps strong{display:block;font-size:20px;line-height:1.5;font-weight:550;margin-top:5px}.story-steps a>span{display:block;font-size:11px;color:#aab2a1;margin-top:5px}.story-steps .active a{border-color:var(--warm)}.story-steps .active small{color:var(--warm)}.story-steps .active strong{color:#fff}.scene-progress{height:2px;max-width:1130px;margin:0 auto;background:#373d33}.scene-progress>span{display:block;height:100%;width:calc(var(--progress)*100%);background:var(--warm)}
.motion-enabled .story-track{padding-bottom:62vh}.motion-enabled .story-sticky{position:sticky;top:12px}.motion-enabled .cinema-scene{max-width:min(100%,calc((100vh - 235px)*1.77 + 32px));margin:auto}.motion-enabled .scene-photo{width:100%}.motion-enabled .brand-mark path{animation:mark-entry .65s ease-out both;stroke-dasharray:128;stroke-dashoffset:0}@keyframes mark-entry{from{stroke-dashoffset:128}to{stroke-dashoffset:0}}
.reading-surface{max-width:1260px;width:calc(100% - 100px);margin:auto}.reading-nav{padding:24px 0;gap:26px;align-items:center;border-bottom:1px solid var(--line);font-size:12px}.reading-nav strong{display:flex;gap:13px;align-items:center;color:var(--red);font-weight:600}.reading-nav svg{width:31px;height:31px;fill:none;stroke:currentColor;stroke-width:2}.intent-tool{margin:76px 0 60px}.section-head h2{font-size:clamp(27px,3.2vw,43px);letter-spacing:-.045em}.eyebrow,.rich-kicker{color:var(--red)}.choice-grid{border-top:1px solid var(--ink);border-bottom:1px solid var(--line);grid-template-columns:1.2fr 1fr 1fr;margin-top:28px}.choice{padding:25px 30px 25px 0;transition:background .2s}.choice[open]{box-shadow:inset 0 3px var(--red)}.choice summary{font-size:21px}.choice summary span{display:inline-block;transition:transform .2s;color:var(--red)}.choice[open] summary span{transform:rotate(45deg)}.choice p{line-height:1.9;font-size:15px}.chapter-heading{grid-template-columns:1fr 2.5fr;margin:70px 0 35px}.chapter-heading h2{font-size:38px}.editorial-grid{gap:0 85px;margin-bottom:85px}.editorial-block:first-child .step-index{color:var(--red);font-size:90px}.editorial-block:first-child h2{font-size:34px}.editorial-block:not(:first-child){padding:25px 0}.editorial-block:not(:first-child) h2{font-size:20px}.rich-opening{max-width:none;display:grid;grid-template-columns:1fr;margin:0 0 60px;padding-top:35px}.rich-opening>div{display:grid;grid-template-columns:1fr 1.05fr;gap:0 75px}.rich-opening .rich-kicker{grid-column:1/-1}.rich-opening h2{font-size:40px;line-height:1.55;letter-spacing:-.035em;margin:15px 0}.rich-opening .rich-intro{margin-top:20px;font-size:16px}.rich-body{padding:0;grid-template-columns:minmax(0,1fr) 240px;gap:100px}.rich-section{padding:30px 0}.rich-section h3{font-size:23px}.rich-guide p{color:#504d48;line-height:2.05}.rich-sidebar{position:sticky;top:35px;border-top-color:var(--red)}.rich-sidebar a:hover{color:var(--red)}.rich-table th{background:var(--ink);color:var(--paper)}.rich-table td:first-child{color:var(--red)}.rich-table tr:nth-child(even) td{background:#e8e3d9}.rich-case{background:#e7dfd2;padding:40px 45px 40px 190px;margin:55px 0}.rich-case::before{color:var(--red);font-size:85px}.article-teaser{gap:60px;border-top:1px solid var(--ink);padding-top:40px;margin-top:65px;align-items:center}.article-teaser h2{font-size:36px}.teaser-photo{position:relative}.teaser-photo::before{content:'';position:absolute;top:-10px;left:-10px;width:45px;height:40px;border:2px solid var(--red);border-right:0;border-bottom:0;pointer-events:none}footer{max-width:1260px;width:calc(100% - 100px);border-color:var(--ink);padding:35px 0}.footer-brand{letter-spacing:-.07em;font-size:54px}a,button,summary{outline-offset:5px}.supporting-page main,.article-page{max-width:1260px}
.motion-reduced .story-track{padding-bottom:0}.motion-reduced .story-sticky{position:relative;top:auto}.motion-reduced .scene-photo{transform:none;will-change:auto}.motion-reduced .scene-progress{display:none}.motion-reduced .cinema-scene{max-width:100%}.motion-reduced *{animation:none!important;transition:none!important}
@media(min-width:1700px){.cinema-cover{padding-inline:max(50px,calc((100% - 1440px)/2))}}
@media(max-width:1050px){.site-header{width:calc(100% - 56px)}.cinema-cover{padding-inline:28px}.reading-surface,footer{width:calc(100% - 56px)}.intro-row{gap:28px}.hero-entry{flex-direction:column;align-items:flex-start;gap:6px}.title-aside{margin-right:0;font-size:21px}.story-heading{min-width:160px;gap:10px}.story-foot{gap:25px}.chapter-counter{font-size:38px;min-width:40px}.story-steps{gap:20px}.story-steps strong{font-size:18px}.rich-body{gap:45px;grid-template-columns:1fr 200px}.rich-opening>div{gap:0 35px}.rich-opening h2{font-size:33px}.reading-nav{gap:20px}.article-teaser h2{font-size:30px}}
@media(max-width:700px){.site-header{width:calc(100% - 36px);padding:16px 0;display:flex;align-items:center}.brand{font-size:20px;gap:8px}.brand-mark{width:31px;height:33px}.brand small{font-size:8px;letter-spacing:.1em}.site-header nav{margin:0;gap:12px;font-size:11px}.site-header nav a:first-child{display:none}.cinema-cover{padding:0 18px 20px}.issue-line{font-size:9px;letter-spacing:.05em;padding-top:17px}.issue-line span:last-child{font-size:9px}.title-row{gap:12px;margin-top:9px;align-items:flex-end}.title-row h1{font-size:clamp(48px,13vw,88px);letter-spacing:-.06em}.title-aside{font-size:12px;padding-left:12px;margin-bottom:6px;white-space:nowrap;line-height:1.7}.intro-row{display:block;margin:17px 0 15px}.intro-row .lead{font-size:13px;line-height:1.8;color:#c8cbbe}.hero-entry{flex-direction:row;gap:24px;margin-top:16px;align-items:center}.hero-entry .button{font-size:12px;min-height:46px;padding:10px 15px;gap:22px}.hero-entry .text-link{font-size:11px}.scene-meta{min-height:43px;font-size:9px;letter-spacing:.03em}.motion-switch{font-size:10px;min-height:40px;padding:7px 9px}.cinema-scene{padding:12px 0 0;margin:0 -4px}.scene-photo{transform:scale(calc(.98 + var(--spread)*.02 - var(--dock)*.02))}.cinema-scene figcaption{font-size:10px;margin-top:10px}.frame-webgl{inset:0 -6px 25px}.frame-fallback{inset:12px 0 27px}.frame-fallback i{width:55px;height:40px;border-width:3px 0 0 3px;left:-4px;top:-4px}.frame-fallback i:last-child{width:40px;height:30px;right:-4px;bottom:-4px}.story-foot{padding:18px 0 15px;display:block}.story-heading{display:none}.story-steps{gap:12px}.story-steps a{padding-top:11px}.story-steps small{font-size:9px}.story-steps strong{font-size:17px;margin-top:4px}.story-steps a>span{font-size:10px;line-height:1.65;min-height:32px}.scene-progress{height:2px}.motion-enabled .story-track{padding-bottom:46vh}.motion-enabled .story-sticky{top:12px}.motion-enabled .cinema-scene{max-width:100%}.reading-surface,footer{width:calc(100% - 36px)}.reading-nav{gap:12px 18px;padding:22px 0;font-size:11px}.reading-nav strong{width:100%;font-size:12px;gap:8px}.reading-nav svg{width:25px;height:25px}.intent-tool{margin:45px 0}.section-head{display:block}.section-head h2{font-size:27px}.section-head>.button{min-height:44px;font-size:12px;margin-top:18px}.intent-tool>p{font-size:13px}.choice-grid{margin-top:22px;display:block}.choice,.choice:not(:first-child){padding:18px 0}.choice[open]{box-shadow:none;border-left:2px solid var(--red);padding-left:16px}.choice summary{font-size:19px}.choice p{font-size:14px}.chapter-heading{margin:45px 0 22px;display:block}.chapter-heading h2{font-size:28px}.editorial-grid{display:block;margin-bottom:50px}.editorial-block:first-child{padding:20px 0 25px;display:grid;grid-template-columns:60px 1fr;gap:15px}.editorial-block:first-child .step-index{font-size:55px;line-height:1.4}.editorial-block:first-child h2{font-size:26px;margin:0 0 13px}.editorial-block:not(:first-child){padding:22px 0;grid-template-columns:35px 1fr}.editorial-block:not(:first-child) h2{font-size:19px}.editorial-block p{font-size:15px}.rich-opening{display:block;margin-bottom:30px;padding-top:25px}.rich-opening>div{display:block}.rich-opening h2{font-size:29px;margin:12px 0 22px}.rich-guide p,.rich-opening .rich-intro{font-size:16px}.rich-body{display:block}.rich-sidebar{position:static;margin-top:30px}.rich-section{padding:24px 0}.rich-section h3{font-size:22px}.rich-case{padding:27px 22px;margin:35px 0}.rich-case::before{font-size:65px}.article-teaser{margin:45px 0;gap:28px}.article-teaser h2{font-size:29px}.teaser-photo::before{left:-7px;top:-7px}footer{padding-top:28px}.footer-brand{font-size:42px}.motion-reduced .story-track{padding-bottom:0}}
@media(prefers-reduced-motion:reduce){.story-track{padding-bottom:0!important}.story-sticky{position:relative!important;top:0!important}.scene-photo{transform:none!important;will-change:auto!important}.scene-progress{display:none}.cinema-scene{max-width:100%!important}*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Spacer is a sibling in the flow; padding would constrain sticky travel. */
.motion-enabled .story-track{padding-bottom:0}.motion-enabled .story-track::after{content:"";display:block;height:62vh}.motion-reduced .story-track::after{display:none}
@media(max-width:700px){.motion-enabled .story-track::after{height:46vh}}
@media(prefers-reduced-motion:reduce){.story-track::after{display:none!important}}

/* Connected scene: the photograph yields space to the meaning of its fields. */
.story-sticky{--handover:0;--note:0}.motion-enabled .scene-photo{transform:translateX(calc(var(--handover)*-18%)) scale(calc(.92 + var(--spread)*.08 - var(--handover)*.32 - var(--dock)*.05))}
.scene-note{position:absolute;right:2%;top:23%;width:28%;z-index:3;opacity:var(--note);transform:translateY(calc(30px - var(--note)*30px));pointer-events:none}.scene-note small{font:10px monospace;letter-spacing:.12em;color:var(--warm)}.scene-note strong{display:block;font:500 clamp(27px,3vw,46px)/1.55 "Songti SC",serif;margin:20px 0}.scene-note p{font-size:13px;color:#c1c5b8;line-height:2}.scene-note>span{display:block;margin-top:30px;font-size:11px;color:var(--warm)}.motion-reduced .scene-note{display:none}
@media(max-width:700px){.motion-enabled .scene-photo{transform:scale(calc(.96 + var(--spread)*.04 - var(--dock)*.07))}.scene-note{display:none}.motion-enabled .story-steps li{transform:translateY(calc(var(--progress)*-5px));transition:border-color .2s}.story-steps .active a{border-top-width:3px;padding-top:9px}.story-steps .active strong{color:#ff9b79}}
@media(prefers-reduced-motion:reduce){.scene-note{display:none}}

.reading-photo{margin:30px 0 50px;position:relative}.reading-photo img{width:100%;height:auto}.reading-photo figcaption{font-size:12px;color:var(--muted);line-height:1.8;margin-top:13px}.reading-photo figcaption span{display:block;font-size:11px;margin-top:4px}.reading-photo::before{content:"";position:absolute;width:45px;height:40px;border:2px solid var(--red);border-right:0;border-bottom:0;top:-9px;left:-9px;pointer-events:none}

.frame-fallback{inset:0}
@media(max-width:700px){.motion-enabled .story-track::after{height:24vh}.scene-note{display:block;position:relative;right:auto;top:auto;width:100%;margin:20px 0 10px;opacity:1;transform:none}.scene-note small,.scene-note>span{display:none}.scene-note strong{font-size:24px;line-height:1.4;margin:0 0 9px}.scene-note strong br{display:none}.scene-note p{font-size:12px;line-height:1.8}.scene-note p br{display:none}.frame-fallback{inset:0}.motion-reduced .scene-note{display:block}}