/* The three public shells share a responsive gutter and keep independent maxima. */
:root{--ar-header-width:1750px;--ar-content-width:1500px;--ar-footer-width:1350px;--ar-layout-gutter:24px}
@media screen{
  body{margin-inline:0}
  body .portal-header,body .utility{box-sizing:border-box;width:100%;max-width:none;padding-inline:max(var(--ar-layout-gutter),calc((100% - var(--ar-header-width))/2))}
  body main.page-container{box-sizing:border-box;width:calc(100% - var(--ar-layout-gutter)*2);max-width:var(--ar-content-width);padding-inline:0;margin-inline:auto}
  body .portal-footer{box-sizing:border-box;width:100%;padding-inline:max(var(--ar-layout-gutter),calc((100% - var(--ar-footer-width))/2))}
  body .portal-footer>:is(.footer-grid,.footer-bottom,.footer-reference-links,.ai-site-note){box-sizing:border-box;width:100%;max-width:var(--ar-footer-width);margin-inline:auto}
  .page-container>:is(.section,.page-intro,.faq,.field-reference,.reference-notebook,.ar-documentary-data,.ar-faq-resources){box-sizing:border-box;max-width:none;min-width:0}
  .page-container>:is(.prose,.narrow){width:100%;max-width:1000px}
  .page-container :is(.cards,.feature-grid,.topic-links,.article-layout,.detail-grid,.history-story)>*{min-width:0}
  .page-container :is(.documentary-figure,.history-infographic){margin-inline:0}
  .page-container :is(.documentary-figure,.history-infographic) img{max-width:100%;height:auto}
  .portal-footer .ai-site-note{clear:both;margin-block:24px;color:#c1ccda}
  .ai-site-note>p{font-size:14px;font-weight:400;line-height:1.7;margin:0;letter-spacing:normal;text-transform:none}
}
@media screen and (max-width:600px){:root{--ar-layout-gutter:16px}}