/* ============================================================
   notes-article.css — individual /notes/<slug>/ article styles
============================================================ */
.art-wrap { max-width: var(--measure); width: 100%; margin: 0 auto; padding: clamp(40px, 7vh, 72px) 8px 24px; }
a.back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--fg-mute); text-decoration: none; margin-bottom: var(--sp-6); }
a.back:hover { color: var(--fg-soft); }

article { font-size: 17px; line-height: 1.7; }
.meta { font-size: 13.5px; color: var(--fg-mute); margin-bottom: var(--sp-5); display: flex; gap: 16px; flex-wrap: wrap; }
h1.title { font-family: var(--f-serif); font-weight: 700; font-size: clamp(32px, 5.2vw, 50px); line-height: 1.08; margin: 0 0 var(--sp-5); letter-spacing: -.025em; }
.lede { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: var(--fg-soft); margin: 0 0 var(--sp-7); padding-bottom: var(--sp-6); border-bottom: 1px solid var(--rule); }

.toc { background: var(--bg-raised); border: 1px solid var(--rule); border-radius: var(--radius-m); padding: 18px 22px; margin: 0 0 var(--sp-7); }
.toc-title { font-size: 13px; font-weight: 600; color: var(--fg-mute); margin-bottom: 10px; }
.toc ol { list-style: decimal; margin: 0; padding-left: 18px; columns: 2; column-gap: 24px; }
.toc li { font-size: 13.5px; line-height: 1.9; break-inside: avoid; }
.toc a { color: var(--fg-soft); text-decoration: none; }
.toc a:hover { color: var(--fg); text-decoration: underline; }

article p { margin: 0 0 22px; color: var(--fg); }
article p.muted { color: var(--fg-soft); }
article h2 { font-family: var(--f-serif); font-weight: 700; font-size: clamp(22px, 2.8vw, 29px); line-height: 1.25; margin: var(--sp-8) 0 var(--sp-4); letter-spacing: -.02em; scroll-margin-top: 24px; }
article h3 { font-family: var(--f-serif); font-weight: 700; font-size: 19px; margin: var(--sp-6) 0 var(--sp-3); color: var(--fg); letter-spacing: -.01em; }
article ul, article ol { padding-left: 22px; margin: 0 0 24px; color: var(--fg); }
article li { margin-bottom: 8px; }
article a { color: inherit; text-decoration: underline; text-decoration-color: var(--fg-mute); text-underline-offset: 3px; }
article a:hover { color: var(--fg-soft); text-decoration-color: var(--fg-soft); }
article em, article i { font-family: var(--f-serif); font-style: italic; color: var(--fg); }
article blockquote { margin: var(--sp-6) 0; padding: 4px 0 4px 24px; border-left: 2px solid var(--a-research); font-family: var(--f-serif); font-size: 22px; line-height: 1.4; color: var(--fg); font-style: italic; }
article blockquote footer { font-size: 13px; font-style: normal; font-weight: 500; color: var(--fg-mute); margin-top: 10px; border: 0; padding: 0; }
article code { font-family: var(--f-mono); font-size: .88em; background: var(--code-bg); padding: 2px 6px; border-radius: 3px; border: 1px solid var(--rule); color: var(--fg); }
article pre { background: var(--code-bg); border: 1px solid var(--rule); border-radius: var(--radius-s); padding: 20px 22px; overflow-x: auto; font-family: var(--f-mono); font-size: 13px; line-height: 1.65; margin: 0 0 24px; color: var(--fg-soft); }
article pre code { background: transparent; padding: 0; border: 0; font-size: inherit; color: inherit; }
.pre-k { color: var(--a-automation); }
.pre-s { color: var(--a-research); }
.pre-c { color: var(--fg-mute); font-style: italic; }
.callout { border: 1px solid var(--rule); border-left: 3px solid var(--a-research); background: color-mix(in oklab, var(--chip) 50%, transparent); padding: 18px 22px; border-radius: 4px; margin: 28px 0; font-size: 15.5px; color: var(--fg-soft); line-height: 1.6; }
.callout strong { color: var(--fg); font-weight: 500; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-6); }
.next { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: var(--sp-7) 0 0; }
.next a { display: block; border: 1px solid var(--rule); border-radius: var(--radius-s); padding: 18px 20px; text-decoration: none; transition: background var(--dur-fast) ease; }
.next a:hover { background: color-mix(in oklab, var(--chip) 50%, transparent); }
.next .lab { font-size: 13px; font-weight: 500; color: var(--fg-mute); margin-bottom: 6px; display: block; }
.next .tit { font-family: var(--f-serif); font-weight: 700; font-size: 17px; line-height: 1.3; letter-spacing: -0.01em; color: var(--fg); }

@media (max-width: 680px) {
  .art-wrap { padding: 32px 4px 16px; }
  .toc ol { columns: 1; }
  .next { grid-template-columns: 1fr; }
}