.article-page { background: #f3f0e8; }
.back-dashboard { padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-size: .78rem; font-weight: 850; }
.back-dashboard:hover { background: var(--ink); color: white; }
.document-nav { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 7px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,253,248,.94); backdrop-filter: blur(16px); box-shadow: 0 8px 30px rgba(16,21,18,.07); }
.document-nav a { min-width: 0; padding: 10px 8px; border-radius: 11px; color: var(--muted); text-align: center; text-decoration: none; font-size: .72rem; font-weight: 850; line-height: 1.15; overflow-wrap: anywhere; }
.document-nav a:hover, .document-nav a:focus-visible, .document-nav a[aria-current="page"] { background: var(--ink); color: white; outline: none; }
.article-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 70px; padding-top: 65px; }
.article-rail { position: sticky; top: 85px; align-self: start; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: #e7eadf; }
.article-rail span { display: block; color: #61705e; font-size: .67rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.article-rail strong { display: block; margin: 12px 0; font-family: Georgia, serif; font-size: 1.6rem; font-weight: 500; line-height: 1.05; }
.article-rail p { color: var(--muted); font-size: .78rem; }
.article-rail a { display: inline-block; margin-top: 16px; font-size: .75rem; font-weight: 850; }
.markdown-body { min-width: 0; padding: 0 0 80px; }
.markdown-body > h1:first-child { max-width: none; margin-top: 0; font-size: clamp(2.8rem, 6vw, 5rem); line-height: .95; }
.markdown-body h1 { max-width: none; margin: 60px 0 24px; font-size: clamp(2.6rem, 5vw, 4.8rem); }
.markdown-body h2 { margin: 58px 0 18px; padding-top: 16px; border-top: 1px solid var(--line); font-family: Georgia, serif; font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 500; line-height: 1.05; letter-spacing: -.035em; }
.markdown-body h3 { margin: 38px 0 12px; font-family: Georgia, serif; font-size: 1.55rem; font-weight: 500; }
.markdown-body h4 { margin: 28px 0 10px; font-size: 1.05rem; }
.markdown-body p, .markdown-body li { color: #374139; font-size: .94rem; line-height: 1.72; }
.markdown-body p { margin: 0 0 18px; }
.markdown-body ul, .markdown-body ol { margin: 0 0 24px; padding-left: 1.4rem; }
.markdown-body li { margin-bottom: 7px; }
.markdown-body a { color: #255f4a; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.markdown-body blockquote { margin: 24px 0; padding: 18px 22px; border-left: 5px solid var(--lime); border-radius: 0 12px 12px 0; background: #e8eee5; color: #354039; }
.markdown-body code { padding: .15em .38em; border-radius: 5px; background: #e6e3da; font-family: "Cascadia Code", Consolas, monospace; font-size: .86em; }
.markdown-body pre { max-width: 100%; margin: 24px 0; padding: 18px; overflow-x: auto; border-radius: 14px; background: #172019; color: #eff6ef; }
.markdown-body pre code { padding: 0; background: transparent; color: inherit; }
.table-scroll { max-width: 100%; margin: 24px 0 34px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: 0 8px 25px rgba(16,21,18,.04); }
.markdown-body table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.markdown-body th { position: sticky; top: 0; background: #172019; color: white; text-align: left; }
.markdown-body th, .markdown-body td { min-width: 125px; padding: 11px 12px; border-right: 1px solid #ddd9cf; border-bottom: 1px solid #ddd9cf; vertical-align: top; }
.markdown-body tr:nth-child(even) td { background: #f4f2ec; }
.markdown-body hr { margin: 45px 0; border: 0; border-top: 1px solid var(--line); }

@media (max-width: 850px) {
  .article-shell { grid-template-columns: 1fr; gap: 30px; }
  .article-rail { position: static; }
}

@media (max-width: 620px) {
  .document-nav { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); width: calc(100% - 24px); border-radius: 16px; }
  .document-nav a { padding: 11px 7px; font-size: .7rem; }
  .markdown-body > h1:first-child { font-size: 2.7rem; }
  .markdown-body p, .markdown-body li { font-size: .9rem; }
}