/* 应用专题：衔接场景用途、拍摄重点与 Studio 工作流。 */
.topic-intro { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; padding-block:26px 28px; }
.topic-intro .quiet-link { margin-bottom:12px; }
.topic-intro h1 { font-size:clamp(32px,3.1vw,46px); font-weight:600; line-height:1.25; letter-spacing:-.025em; max-width:18em; }
.topic-lead { color:var(--dim); font-size:17px; line-height:1.85; max-width:40em; }
.topic-hero { overflow:hidden; background:#171b20; }
.topic-hero > img { width:100%; height:clamp(280px,33vw,440px); object-fit:cover; }
.topic-hero-caption { position:absolute; right:18px; bottom:18px; display:inline-flex; align-items:center; gap:16px; padding:8px 14px; border-radius:6px; background:#101216d9; color:#f5f6f8; font-size:14px; }
.topic-hero-caption { transition:background-color 160ms ease; }
.topic-hero:is(:hover,:focus-visible) .topic-hero-caption { background:#20252de8; color:#fff; }
.page-topic .section-jump { padding-block:16px; margin-bottom:6px; }
.page-topic h2 { font-size:clamp(25px,2.3vw,31px); line-height:1.4; font-weight:550; letter-spacing:-.02em; }
.page-topic h3 { font-size:20px; line-height:1.45; font-weight:550; margin-bottom:10px; }
.topic-purpose { padding-block:22px 30px; }
.topic-uses { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin-top:24px; }
.topic-uses p,.topic-section p { color:var(--dim); font-size:16px; line-height:1.85; }
.topic-section { display:grid; grid-template-columns:280px minmax(0,1fr); gap:clamp(28px,5vw,72px); padding-block:32px; }
.topic-section > div { min-width:0; }
.topic-section-intro { margin-bottom:20px; }
.topic-capture-list { padding:0; list-style:none; counter-reset:capture; display:grid; gap:22px; }
.topic-capture-list li { counter-increment:capture; position:relative; padding-left:36px; }
.topic-capture-list li::before { content:"0" counter(capture); position:absolute; top:3px; left:0; color:#c89d7d; font-size:12px; }
.topic-capture-list h3 { margin-bottom:6px; }
.topic-guide-links { display:flex; flex-wrap:wrap; gap:4px 26px; margin-top:12px; }
.topic-review { display:grid; grid-template-columns:1fr 1fr; gap:20px 28px; }
.topic-review > a { grid-column:1 / -1; justify-self:start; }
.topic-scope { margin-top:22px; padding-left:20px; border-left:2px solid #9a7659; }
.topic-scope h3 { font-size:16px; }
.topic-scope p { font-size:14px; }
.topic-scope p + p { margin-top:10px; }
.topic-related { padding-block:26px; }
.topic-related-grid { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:22px; }
.topic-related-link { display:grid; grid-template-columns:150px minmax(0,1fr); gap:20px; align-items:center; min-width:0; }
.topic-related-link > img { width:100%; height:auto; aspect-ratio:8 / 5; object-fit:cover; border-radius:10px; border:1px solid #ffffff24; }
.topic-related-link h3 { font-size:19px; margin-bottom:5px; }
.topic-related-link p { color:var(--dim); font-size:14px; line-height:1.6; }
.topic-related-link:hover h3 { color:#fff; }
.topic-start { display:flex; align-items:center; justify-content:space-between; gap:28px; padding-block:26px; }
.topic-start p { color:var(--dim); font-size:16px; max-width:48em; margin-top:10px; }
.topic-start-actions { display:flex; flex-wrap:wrap; gap:8px 20px; flex-shrink:0; align-items:center; }
@media(max-width:1100px) { .topic-section { grid-template-columns:220px minmax(0,1fr); } .topic-review { grid-template-columns:1fr; } .topic-related-link { grid-template-columns:120px minmax(0,1fr); gap:16px; } .topic-start { align-items:start; flex-direction:column; gap:16px; } }
@media(max-width:760px) { .topic-intro,.topic-section { grid-template-columns:1fr; gap:18px; } .topic-intro { padding-block:22px; } .topic-lead { font-size:16px; } .topic-hero > img { height:auto; aspect-ratio:1.4; } .topic-hero-caption { right:12px; bottom:12px; font-size:13px; } .topic-uses { grid-template-columns:1fr; gap:24px; margin-top:20px; } .topic-purpose,.topic-section { padding-block:24px; } .topic-section h2 { max-width:24em; } .topic-related-grid { grid-template-columns:1fr; gap:24px; } .topic-related-link { grid-template-columns:112px minmax(0,1fr); } .topic-start-actions { flex-shrink:1; } }