/* article.css v1: one shared article layout for notes and /design/, matching /notes/portfolio-by-chat/.
   Container 1200 (padding 24 / 16). Hero left-aligned on the container edge. Body = 230px sticky rail + 40px gap + one column.
   Blocks span the full column; prose keeps a reading measure inside it. <=900px: rail hidden, sticky jump select. */
.art-hero .page-title{max-width:16ch}
.art-hero .page-lede,.art-hero .page-lead{max-width:560px}
.art-main{padding-top:0}
.art-grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:40px;align-items:start;padding-bottom:64px}
.art-rail{position:sticky;top:calc(var(--hh,62px) + 20px);align-self:start;max-height:calc(100vh - var(--hh,62px) - 40px);overflow:auto}
.art-rail-h{font-size:11px;font-weight:500;letter-spacing:.05em;color:var(--muted);margin:0 0 6px;padding-left:10px}
.art-rail ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.art-rail a{text-decoration:none!important;display:flex;align-items:center;min-height:36px;padding:4px 10px;border-radius:var(--r-sm);color:var(--muted);text-decoration:none;font-size:13.5px;line-height:1.35}
.art-rail a:hover{background:var(--surface-2);color:var(--ink)}
.art-rail a[aria-current="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.art-rail a:focus-visible,.art-jump select:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.art-col{min-width:0;max-width:none!important;width:100%}
.art-col>*,.art-col .note-body>*{max-width:none}
/* reading measure for prose only; blocks (figures, prompts, cards, ai rows, code) span the column */
.art-col .note-body>p,.art-col .note-body>ul,.art-col .note-body>ol,.art-col .note-body>h2,.art-col .note-body>h3,.art-col .note-body>blockquote,.art-col .ds-p{max-width:68ch}
.art-col h2[id],.art-col section[id]{scroll-margin-top:calc(var(--hh,62px) + 24px)}
.art-jump{display:none}
/* /design/ uses the same grid; its own design.css .ds-layout/.ds-index are overridden here (article.css loads last) */
.art-grid.ds-layout{grid-template-columns:230px minmax(0,1fr);gap:40px}
.ds-index.art-rail{top:calc(var(--hh,62px) + 20px)}
.ds-index.art-rail a{min-height:44px}
.art-hero .ds-narrow,.art-hero.ds-hero .container{max-width:var(--container,1200px);padding-left:24px;padding-right:24px}
.art-hero .ds-narrow>*{max-width:none}
.art-hero .ds-narrow>.page-title{max-width:16ch}.art-hero .ds-narrow>.page-lede{max-width:560px}

.art-hero .ds-facts,.art-hero .ds-agent{max-width:none}
@media (min-width:1024px){.art-hero.ds-hero .ds-narrow{padding-left:24px}}
@media (max-width:900px){
 .art-grid,.art-grid.ds-layout{grid-template-columns:minmax(0,1fr);gap:0}
 .art-rail,.ds-index.art-rail{display:none}
 .art-jump,.ds-jumpbar{display:block;position:sticky;top:var(--art-hh,var(--ds-hh,var(--hh,62px)));z-index:30;padding:8px 16px;margin:0 0 16px;background:var(--chrome,var(--page));box-shadow:0 1px 0 var(--line)}
 .art-jump select,#ds-jump{display:block;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:var(--r);background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2);font:500 14px/1 var(--font)}
 .art-col h2[id],.art-col section[id],.ds-sec{scroll-margin-top:calc(var(--art-hh,var(--ds-hh,var(--hh,62px))) + 76px)}
}
@media (max-width:900px){.container>.art-jump{margin:0 -16px 16px}}
@media (max-width:720px){.art-hero .ds-narrow,.art-hero.ds-hero .container{padding-left:16px;padding-right:16px}}
.art-col h2[tabindex="-1"]:focus{outline:none}
.art-col>.note-body>:first-child,.art-col>:first-child{margin-top:0}
@media (min-width:721px) and (max-width:900px){.container>.art-jump{margin-inline:-24px}}