@layer components {
  .reading-page{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.7}
  .reading-header,.reading-main,.reading-footer{inline-size:min(900px,calc(100% - 44px));margin-inline:auto}
  .reading-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:24px;border-block-end:1px solid var(--line)}
  .reading-header img{inline-size:132px;block-size:auto}
  .reading-page a{display:inline-flex;align-items:center;min-block-size:44px;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;overflow-wrap:anywhere}
  .reading-header a:first-child{text-decoration:none}
  .reading-main{padding-block:64px}
  .reading-main h1{font-size:clamp(32px,4vw,48px);line-height:1.12;max-inline-size:22ch}
  .reading-intro{font-size:18px;color:var(--muted);max-inline-size:65ch;margin-block:20px 44px}
  .reading-main section{margin-block-start:40px}
  .reading-main h2{font-size:24px;line-height:1.25;padding-block-end:16px;border-block-end:1px solid var(--line)}
  .reading-main p,.reading-main li{max-inline-size:72ch;color:var(--muted)}
  .reading-main section p{margin-block-start:16px}
  .reading-main strong{font-weight:600;color:var(--ink)}
  .reading-main ul{padding-inline-start:22px;margin-block:16px}
  .reading-main li{margin-block:10px}
  .reading-footer{display:flex;align-items:center;flex-wrap:wrap;gap:12px 28px;padding-block:24px 40px;border-block-start:1px solid var(--line)}
  @media(max-width:700px){.reading-main{padding-block:40px}.reading-intro{font-size:16px}.reading-header{gap:16px}.reading-header>a:last-child{font-size:14px}}
}