/* Shared, approved chapter composition. Behavior stays in the existing modules. */
:root{--page-inset:2rem}
.site-header{width:calc(100% - 2 * var(--page-inset));max-width:var(--container-reading);margin-inline:auto;padding-inline:0;flex-wrap:wrap}
.site-header{padding-block:var(--space-4);gap:var(--space-6);border-bottom:1px solid var(--line)}
.site-header .logo,.site-footer .logo{flex-shrink:0}.site-header .logo img,.site-footer .logo img{width:210px;height:auto;max-width:none}
.display-group button{font-size:var(--text-label);min-width:44px;padding:var(--space-2)}
.display-group button[aria-pressed=true]{border-color:var(--accent)}
.studio-page{max-width:calc(var(--container-reading) + 2 * var(--page-inset));padding:var(--space-4) var(--page-inset) var(--space-12)}
main[data-layout=workbench] .studio-page{max-width:calc(var(--container-workbench) + 2 * var(--page-inset))}.studio-page>.breadcrumbs{padding-block:0 var(--space-4)}
.studio-masthead{background:var(--brand-field);color:var(--on-brand);padding:var(--space-6);margin-block:0 var(--space-8);max-width:none;border:0;align-items:start}
.page-heading.studio-masthead{padding:var(--space-6);max-width:none}
.studio-masthead h1{color:var(--on-brand);max-width:28ch}.studio-masthead .accent{color:var(--on-brand)}
.studio-masthead:not(.detail-masthead) p,.studio-masthead:not(.detail-masthead) .section-eyebrow,.studio-masthead:not(.detail-masthead) .muted{color:var(--on-brand)}
.studio-masthead .text-link{color:var(--on-brand)}.studio-masthead a:not(.button):hover{text-decoration:underline}
.studio-masthead a:focus-visible,.studio-masthead button:focus-visible{outline-color:var(--on-brand)}
.studio-masthead .button{background:var(--on-brand);color:var(--brand-field);border-color:var(--on-brand)}
.studio-masthead .button:hover{background:var(--on-brand);color:var(--brand-field-hover)}
.studio-masthead .badge{background:var(--on-brand);color:var(--brand-field);margin-bottom:var(--space-4)}
.detail-masthead.studio-masthead .page-heading{padding-block:0 var(--space-4);color:var(--on-brand);background:transparent}
.detail-masthead.studio-masthead .page-heading p,.detail-masthead.studio-masthead .masthead-context p{color:var(--on-brand)}
.detail-masthead.studio-masthead .masthead-context{border-color:var(--brand-line)}
.detail-masthead.studio-masthead .process-preview,.detail-masthead.studio-masthead .project-preview{color:var(--ink);box-shadow:none}
.workflow-intro.studio-masthead .page-heading{padding:0;margin:0;background:transparent}.workflow-intro.studio-masthead .workflow-mode{background:var(--brand-field-hover);border:1px solid var(--brand-line);border-radius:6px;color:var(--on-brand)}.workflow-intro.studio-masthead .workflow-mode .text-link{padding-inline:0;color:var(--on-brand)}
.studio-page .inside-layout{align-items:start}
.studio-page .local-nav{background:var(--surface);border:1px solid var(--line);box-shadow:none}
.local-nav a[data-scroll]{border:1px solid transparent;border-radius:6px}
.local-nav a[data-scroll][aria-current=location]{background:var(--panel);border:1px solid var(--accent);color:var(--accent)}
.studio-page .article>section{border-bottom:1px solid var(--line)}
.studio-page .article>section:first-child:not(.solution-example){padding-top:var(--space-6)}
.studio-page .article>section.solution-example{padding:var(--card-inset);background:var(--tint);border:1px solid var(--line);border-radius:var(--radius);margin-block:var(--space-6)}
.studio-page .flowline>div{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.studio-page .preview-output{border:1px solid var(--line);border-radius:6px}
.studio-page .studio-region{margin-block:var(--space-6)}
.studio-page .real-examples{background:var(--surface);padding:var(--card-inset);border:1px solid var(--line);border-radius:var(--radius)}
.studio-page .real-examples-grid{gap:var(--space-6)}
.studio-page .real-examples figure{border-color:var(--line)}
.studio-page .news-scale{background:var(--tint);border:1px solid var(--line);border-radius:var(--radius);margin-block:var(--space-6)}
.studio-page .news-scale strong{font-size:var(--text-h2);color:var(--ink)}
.studio-page .news-explainer{background:var(--surface);border:1px solid var(--line);padding:var(--card-inset)}
.studio-page .news-transformation>div{border:1px solid var(--line);border-radius:6px}
.studio-page .news-value{padding:var(--card-inset);background:var(--tint);border:1px solid var(--line);border-radius:var(--radius)}
.studio-page .news-problem,.studio-page .news-control,.studio-page .visual-project-process{padding-block:var(--space-6);border-bottom:1px solid var(--line)}
.studio-page .news-evidence{padding:var(--card-inset);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.studio-page .note-band{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--card-inset)}
.studio-page .solutions-list{background:var(--surface);padding-inline:var(--card-inset);border:1px solid var(--line);border-radius:var(--radius)}
.studio-page .solution-shortcuts{padding:var(--space-4) 0;margin-bottom:var(--space-6)}
.studio-page .solution-row{background:none}.studio-page .solution-row:last-child{border-bottom:0}
.studio-page .practice-list{background:var(--surface);padding-inline:var(--card-inset);border:1px solid var(--line);border-radius:var(--radius)}
.studio-page .practice-step:last-child{border-bottom:0}.studio-page .practice-step{grid-template-columns:2rem minmax(160px,.6fr) minmax(0,1.4fr)}
.studio-page .story-role{background:var(--tint);border:1px solid var(--line);border-radius:6px}
.studio-page .process-preview,.studio-page .project-preview,.studio-page .art-window,.studio-page .art-message,.studio-page .signal-result{box-shadow:none}
body:has(main[data-layout=workbench]) .site-header{max-width:var(--container-workbench)}
@media(min-width:621px) and (max-width:1279px){.site-header .display-toolbar{margin-left:auto}.site-header nav{order:3;width:100%;margin-top:0}}
@media(max-width:370px){.site-header .logo img,.site-footer .logo img{width:174px}.site-header .display-toolbar{gap:var(--space-2)}.display-group{gap:0}.display-group button{padding-inline:var(--space-1)}}
/* Approved reading, process and footer roles, brandbook §17. */
.solution-process{margin-block:var(--space-8);min-width:0}.solution-process>h2{margin-bottom:var(--space-4)}
.studio-page .detail-masthead{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.studio-page .masthead-context{margin:0;padding:var(--space-4);border:1px solid var(--brand-line);max-width:none}
.studio-page .practice-step{padding:var(--card-inset);gap:var(--space-4)}
.studio-page .solution-row{padding:var(--space-6) var(--space-4)}
.studio-page .solution-shortcuts a{padding:var(--space-3) var(--space-4)}
.site-footer{display:block;width:100%;max-width:none;margin:0;padding:var(--space-8) 0;border-top:1px solid var(--line);background:var(--surface)}
.site-footer>div.footer-wrap{display:block;width:min(calc(100% - 2 * var(--page-inset)),var(--container-reading));margin-inline:auto;font-size:var(--text-body)}
.site-footer .footer-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr) minmax(0,.9fr) minmax(0,1.1fr);gap:var(--space-6);padding-block:var(--space-4) var(--space-8)}
.site-footer .footer-grid>*,.site-footer .footer-next{min-width:0}
.site-footer h2{font-size:var(--text-title);line-height:1.35;margin:0 0 var(--space-4)}
.site-footer .footer-identity h2{margin-top:var(--space-4);margin-bottom:var(--space-2)}
.site-footer p{font-size:var(--text-small);line-height:1.6;margin:0;color:var(--muted)}
.site-footer .footer-routes a{display:flex;justify-content:space-between;align-items:center;padding:var(--space-2) var(--space-3);min-height:44px;border-bottom:1px solid var(--line);font-size:var(--text-small)}
.site-footer .footer-routes a:hover,.site-footer .footer-routes a[aria-current=page]{background:var(--tint);color:var(--accent)}
.site-footer .footer-next .button{display:inline-flex;margin-block:var(--space-4);color:var(--on-brand)}
:root[data-theme=dark] .site-footer .footer-next .button{color:var(--bg)}
.site-footer .footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-4);border-top:1px solid var(--line);padding-top:var(--space-4);font-size:var(--text-small);color:var(--muted)}
.site-footer .footer-bottom a{display:flex;align-items:center;min-height:44px;padding-inline:var(--space-3)}
.site-footer a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media(max-width:1000px){.site-footer .footer-grid{grid-template-columns:1fr 1fr}.site-footer .footer-next{grid-column:auto}}
@media(max-width:900px){.studio-page .detail-masthead{grid-template-columns:1fr}}
@media(max-width:620px){.site-footer .footer-grid{grid-template-columns:1fr;gap:var(--space-6)}.site-footer .footer-next{grid-column:auto}.studio-page .practice-step{grid-template-columns:1.5rem minmax(0,1fr)}.studio-page .solution-row{padding:var(--space-4)}.studio-page .solutions-list{padding-inline:0}}

@media(max-width:800px){.studio-page .inside-layout{gap:var(--space-6)}.studio-masthead,.page-heading.studio-masthead{padding:var(--card-inset)}}
@media(max-width:620px){:root{--page-inset:1.25rem}.site-header{padding-inline:0}.site-header .logo img,.site-footer .logo img{width:190px}.site-header .display-toolbar{padding-inline:0;gap:var(--space-2)}}

@media(max-width:370px){.site-header .logo img,.site-footer .logo img{width:174px}}

.studio-page .project-masthead .masthead-context{margin-top:var(--space-4)}

@media(max-width:370px){.site-header{gap:var(--space-3)}.site-header .display-toolbar{gap:var(--space-1)}}