/* 静室 CSS：04-components.css。职责边界见 governance/CSS_ARCHITECTURE_AND_TOKENS_20260814.md。 */
@layer components {
  /* 图像的固有尺寸来自派生清单，加载时不改变正文的几何布局。 */ .article-picture {
    display:block;
    max-width:100%;
    margin:2.55em 0 2.7em
  }
  .article-picture img,.article-body>img {
    display:block;
    max-width:100%;
    height:auto;
    margin:0
  }
  .article-body>img {
    margin:2.55em 0 2.7em
  }
  .article-body figure {
    max-width:100%;
    margin:2.55em 0 2.7em
  }
  .article-body figcaption {
    margin-top:.8em;
    color:var(--text-muted);
    font:400 .68em/1.65 var(--font-ui)
  }
  /* 语义脚注在宽屏落入旁栏，在窄屏变为可展开的行内注释。 */ .sidenote-anchor {
    position:relative;
    display:inline
  }
  .sidenote-toggle {
    display:inline;
    margin:0 .04em;
    padding:0;
    border:0;
    background:transparent;
    color:var(--action-primary);
    font:600 .62em/1 var(--font-ui);
    vertical-align:super;
    cursor:pointer
  }
  .sidenote-toggle:hover,.sidenote-toggle:focus-visible,.sidenote-toggle[aria-expanded="true"] {
    color:var(--text-primary);
    text-decoration:underline;
    text-underline-offset:.18em
  }
  .sidenote {
    --sidenote-offset:0px;
    display:none;
    margin:.75em 0;
    padding:.8em .9em;
    border-left:2px solid var(--action-subtle);
    background:var(--surface-subtle);
    color:var(--text-secondary);
    font:400 .75em/1.62 var(--font-reading)
  }
  .sidenote p {
    margin:0 0 .65em
  }
  .sidenote p:last-child {
    margin-bottom:0
  }
  .sidenote-label {
    display:block;
    margin-bottom:.42em;
    color:var(--text-muted);
    font:700 .74em/1.2 var(--font-ui);
    letter-spacing:.07em;
    text-transform:uppercase
  }
  .sidenote-anchor.is-open .sidenote {
    display:block
  }
  .sidenote a {
    color:var(--action-primary)
  }
  @media(min-width:1260px) {
    .sidenote-toggle {
      cursor:default;
      pointer-events:none
    }
    .sidenote {
      position:absolute;
      z-index:var(--z-sidenote);
      top:0;
      left:calc(100% + 48px);
      display:block;
      width:192px;
      margin:0;
      padding:0;
      border:0;
      background:transparent;
      font-size:.72em;
      transform:translateY(var(--sidenote-offset,0px))
    }
    .sidenote-label {
      display:inline;
      margin:0 .32em 0 0
    }
    .sidenote p {
      display:inline;
      margin:0
    }
    .sidenote p+p:before {
      content:" ";
      white-space:pre
    }
    .sidenote a {
      white-space:normal
    }
  }
  @media(max-width:760px) {
    .article-picture {
      margin:2.15em 0 2.3em
    }
    .sidenote {
      font-size:.78em
    }
    .sidenote-toggle {
      font-size:.66em
    }
  }
  /* 只有真实章节时才出现：目录属于正文入口，不是常驻工具栏。 */ .article-outline {
    max-width:var(--container-reading);
    margin:var(--space-6) auto 0;
    padding:var(--space-4) 0 var(--space-5);
    border-top:var(--stroke-hairline) solid var(--border-subtle);
    border-bottom:var(--stroke-hairline) solid var(--border-subtle)
  }
  .article-outline .section-kicker {
    margin:0 0 8px
  }
  .article-outline ol {
    display:grid;
    gap:var(--space-1);
    margin:0;
    padding:0;
    list-style:none
  }
  .article-outline li {
    position:relative;
    padding-left:var(--space-3);
    font:400 14px/1.55 var(--font-reading)
  }
  .article-outline li:before {
    position:absolute;
    left:0;
    color:var(--action-primary);
    content:"·"
  }
  .article-outline li.level-3 {
    padding-left:var(--space-5);
    color:var(--text-secondary);
    font-size:13px
  }
  .article-outline li.level-3:before {
    left:var(--space-3);
    color:var(--text-muted)
  }
  .article-outline a {
    text-decoration:underline;
    text-decoration-color:transparent;
    text-underline-offset:.2em;
    transition:color var(--motion-state) var(--motion-easing),text-decoration-color var(--motion-state) var(--motion-easing)
  }
  .article-outline a:hover,.article-outline a[aria-current="location"] {
    color:var(--action-primary);
    text-decoration-color:var(--action-subtle)
  }
  .article-outline a[aria-current="location"] {
    font-weight:600
  }
  .article-body h1,.article-body h2,.article-body h3 {
    scroll-margin-top:calc(var(--space-8) + var(--space-4))
  }
  .article-body h1:target,.article-body h2:target,.article-body h3:target {
    text-decoration:underline;
    text-decoration-color:var(--action-subtle);
    text-decoration-thickness:var(--stroke-hairline);
    text-underline-offset:.28em
  }
  @media(max-width:760px) {
    .article-outline {
      margin-top:var(--space-5);
      padding:var(--space-4) 0
    }
    .article-outline li {
      font-size:15px
    }
    .article-outline li.level-3 {
      font-size:14px
    }
  }
  /* 媒体系统：图片是证据单元，不是背景、封面或滚动装饰。 */ .article-body .article-figure {
    max-width:100%;
    margin:2.75em 0 2.9em
  }
  .article-figure .article-picture {
    display:block;
    margin:0
  }
  .article-figure .article-picture img {
    display:block;
    width:100%;
    max-inline-size:100%;
    block-size:auto;
    margin:0
  }
  .article-figure figcaption {
    max-width:62ch;
    margin:var(--space-3) 0 0;
    color:var(--text-muted);
    font:400 .68em/1.7 var(--font-ui);
    letter-spacing:.015em
  }
  .article-media-summary {
    max-width:62ch;
    margin:var(--space-3) 0 0;
    padding-left:var(--space-4);
    border-left:var(--stroke-hairline) solid var(--action-subtle);
    color:var(--text-secondary);
    font:400 .78em/1.7 var(--font-reading)
  }
  .article-media-summary strong {
    color:var(--text-primary);
    font:600 .88em/1.4 var(--font-ui);
    letter-spacing:.05em
  }
  .media-contract-panel {
    border-top:var(--stroke-hairline) solid var(--border-subtle)
  }
  .media-contract {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:var(--space-5);
    margin-top:var(--space-6);
    padding-top:var(--space-5);
    border-top:var(--stroke-hairline) solid var(--border-subtle)
  }
  .media-contract p {
    display:grid;
    gap:var(--space-2);
    margin:0;
    color:var(--text-secondary);
    font-size:.86rem;
    line-height:1.65
  }
  .media-contract b {
    color:var(--text-primary);
    font:600 .72rem/1.2 var(--font-ui);
    letter-spacing:.07em
  }
  .asset-form textarea {
    display:block;
    width:100%;
    min-height:6.4em;
    margin-top:var(--space-2);
    resize:vertical;
    border:var(--stroke-hairline) solid var(--border-strong);
    background:var(--surface-canvas);
    color:var(--text-primary);
    padding:var(--space-3);
    line-height:1.6
  }
  .asset-form textarea:focus-visible {
    border-color:var(--action-primary)
  }
  @media(max-width:760px) {
    .article-body .article-figure {
      margin:2.35em 0 2.5em
    }
    .article-figure figcaption,.article-media-summary {
      font-size:.72em
    }
    .media-contract {
      grid-template-columns:1fr;
      gap:var(--space-4)
    }
  }
}

/* A3 相关文章 (2026-08-23): 与 essay-turning 同构的母题导航 */
.essay-related { margin-top: var(--space-xl, 3rem); }