/* One shared content width for every page. Mobile fills the viewport. */
:root {
 --layout-max:1280px;
 --layout-unit:min(calc(1vw - .64px),calc(var(--layout-max) / 100));
 --page-gutter:calc(3.2 * var(--layout-unit));
 --block-rule:#a9aeb6;
}
body {
 width:calc(100% - 64px);
 max-width:var(--layout-max);
 margin-inline:auto;
}
/* Compact interior-page header, with the same logo label and menu type as home. */
:is(.about-page,.contents-page) .brand-stage {height:calc(13.7 * var(--layout-unit))}
:is(.about-page,.contents-page) .brand {top:calc(3.1 * var(--layout-unit))}
:is(.about-page,.contents-page) .navigation {height:calc(3.45 * var(--layout-unit));margin-inline:var(--page-gutter);border-color:#b5bcc6}
@media(max-width:700px) {
 :root {--layout-unit:1vw;--page-gutter:20px}
 body {width:100%;max-width:none}
 :is(.about-page,.contents-page) .brand-stage {height:130px}
 :is(.about-page,.contents-page) .brand {top:27px}
 :is(.about-page,.contents-page) .brand-symbol {width:66px}
 :is(.about-page,.contents-page) .brand-name {margin-top:8px}
 :is(.about-page,.contents-page) .navigation {height:37px}
}