/* Editorial composition: more useful first-screen content, shared brandbook scale. */
:root{--shell-width:1560px}
.page,.site-header,.display-toolbar{max-width:var(--shell-width)}
.site-footer{max-width:1496px}
#main:focus{outline:none}
.detail-masthead{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,.85fr);gap:var(--space-12);align-items:center;padding:var(--space-6) 0 var(--space-8);border-bottom:1px solid var(--line);margin-bottom:var(--space-8)}
.detail-masthead .page-heading{padding:0 0 var(--space-6)}.detail-masthead .page-heading h1{max-width:22ch}.detail-masthead .page-heading p{max-width:52ch}
.detail-masthead .solution-actions{margin-bottom:0;gap:var(--space-4)}
.process-preview,.project-preview{padding:var(--card-inset);border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);box-shadow:0 8px 24px color-mix(in srgb,var(--ink) 5%,transparent);min-width:0}
.preview-top{display:flex;justify-content:space-between;gap:var(--space-4);font-size:var(--text-small);color:var(--muted);align-items:center;margin-bottom:var(--space-4)}
.preview-dot{width:8px;height:8px;background:var(--accent);transform:rotate(30deg)}
.process-preview h2{font-size:1.25rem;line-height:1.35;margin-bottom:var(--space-4);max-width:30ch;text-wrap:pretty}
.preview-rows{border-top:1px solid var(--line)}.preview-rows>div{display:grid;grid-template-columns:minmax(100px,.7fr) minmax(0,1fr);gap:var(--space-4);padding:var(--space-3) 0;border-bottom:1px solid var(--line);font-size:var(--text-small);line-height:1.5}
.preview-rows span{color:var(--muted)}.preview-rows strong{font-weight:650}
.preview-output{display:flex;gap:var(--space-3);padding:var(--space-4);margin-top:var(--space-4);background:var(--tint);border-left:3px solid var(--accent)}
.output-symbol{color:var(--accent);font-size:1.5rem}.preview-output strong{font-size:var(--text-body)}.preview-output p,.process-preview>small,.project-preview>small{font-size:var(--text-small);line-height:1.5;color:var(--muted)}
.process-preview>small,.project-preview>small{display:block;margin-top:var(--space-4)}
.project-preview{background:var(--surface)}.project-diagram{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}.project-diagram>div{background:var(--panel);padding:var(--space-4);border:1px solid var(--line);min-width:0}.project-diagram span{display:block;color:var(--accent);font-size:var(--text-small);margin-bottom:var(--space-2)}.project-diagram strong{font-size:var(--text-body);font-weight:650}
.inside-layout{grid-template-columns:190px minmax(0,1fr);gap:var(--space-8)}.article{max-width:none}.article>section>p{max-width:68ch}
.local-nav{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-2);gap:var(--space-1)}
.local-nav .nav-title{padding:var(--space-3);font-size:var(--text-small)}
.local-nav a[data-scroll]{border-left:3px solid transparent;border-radius:3px;transition:background .15s,color .15s}
.local-nav a[data-scroll][aria-current=location]{color:var(--accent);background:var(--panel);border-left-color:var(--accent);font-weight:750}
.local-nav .button{margin-top:var(--space-3)}
.article>section:not(.solution-example){padding-block:var(--space-6)}.article>section:first-child:not(.solution-example){padding-top:0}
.flowline>div{border-top:2px solid var(--accent);border-radius:0 0 6px 6px}
.projects-list{gap:var(--space-4)}.project-card{border-top:3px solid var(--accent)}
@media(min-width:1700px){.page,.site-header,.display-toolbar{max-width:min(88vw,1760px)}.site-footer{max-width:min(calc(88vw - 64px),1696px)}}
@media(max-width:1100px){.detail-masthead{grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);gap:var(--space-6)}.inside-layout{grid-template-columns:170px minmax(0,1fr);gap:var(--space-6)}}
@media(max-width:800px){.detail-masthead{grid-template-columns:1fr;gap:var(--space-6)}.detail-masthead .page-heading h1{max-width:none}.inside-layout{grid-template-columns:1fr}.local-nav{position:static;display:flex;flex-direction:row;flex-wrap:wrap}.local-nav .nav-title{width:100%}.local-nav .button{display:none}.local-nav a[data-scroll]{border-left:0;border-bottom:3px solid transparent}.local-nav a[data-scroll][aria-current=location]{border-bottom-color:var(--accent)}}
@media(max-width:420px){.preview-rows>div{grid-template-columns:1fr;gap:var(--space-1)}.project-diagram{grid-template-columns:1fr}.detail-masthead{padding-top:var(--space-4)}}
@media(prefers-reduced-motion:reduce){.local-nav a[data-scroll]{transition:none}}
/* Independent design review: align useful content, remove a redundant header row. */
.detail-masthead{align-items:start;padding-block:var(--space-4) var(--space-6);margin-bottom:var(--space-6)}
.project-masthead .project-diagram>div{padding:var(--space-3) var(--space-4)}
.project-masthead .project-preview{padding:var(--space-4)}
.article #result{background:var(--tint);padding:var(--card-inset);border:1px solid var(--line);margin-block:var(--space-4)}
.editorial-evidence{border:0;padding:0}.editorial-evidence summary{color:var(--accent);min-height:44px;display:list-item;align-content:center}
.site-header .display-toolbar{border:0;max-width:none;flex-shrink:0;padding:0;margin:0;gap:8px}
@media(min-width:1280px){.site-header{gap:24px;min-height:88px}.site-header nav{gap:16px;font-size:var(--text-small)}.site-header .display-toolbar{margin-left:auto}.control-caption{display:none}.display-group{gap:0}.display-group button{min-width:40px}.site-header .logo img{width:190px}.site-header nav .button{padding-inline:12px}.site-header nav{margin-left:auto}}
@media(min-width:621px) and (max-width:1279px){.site-header{flex-wrap:wrap}.site-header .display-toolbar{margin-left:auto}.site-header nav{order:3;width:100%;justify-content:space-between;margin-top:8px}.control-caption{display:none}}
@media(max-width:620px){.site-header .display-toolbar{width:100%;order:2;justify-content:space-between;margin-top:8px}.site-header nav{order:3}.site-header .menu-toggle{order:1}.display-group button{min-width:44px}.site-header{padding-bottom:12px}}
.masthead-context{margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--line);max-width:60ch;scroll-margin-top:24px}.masthead-context h2{font-size:var(--text-h3);line-height:1.4;margin-bottom:var(--space-2)}.masthead-context p{font-size:var(--text-body);color:var(--muted)}