/* The page frame, loaded last on every page. Dark green is the desk every page lies on; light content is paper laid on
   it, in rounded sheets with a thin margin of desk around them, so white and green never meet in a straight cut. */
:root{--desk:#101817;--sheet:#f8f7f3;--sheet-gap:clamp(6px,1.1vw,16px);--sheet-r:clamp(18px,2.2vw,32px);--edge:56px}
@media(max-width:1150px){:root{--edge:40px}}
@media(max-width:850px){:root{--edge:24px}}
@media(max-width:600px){:root{--edge:20px}}
@media(max-width:370px){:root{--edge:16px}}

body:is(.home-page,.service-page,.privacy-page,.not-found-page){background:var(--desk)}
:is(.sheet,.r9-home .r9-systems,.r9-home .contact-section,.r8-service .service-contact){margin-inline:var(--sheet-gap);border-radius:var(--sheet-r);overflow:clip}
/* flow-root: a tray's margin stays inside the sheet instead of collapsing through its edge. */
.sheet{display:flow-root;background:var(--sheet)}
.sheet+:is(.contact-section,.service-contact){margin-top:var(--sheet-gap)}
/* Text inside a sheet keeps the same left edge as the dark parts of the page, where there is room for it. */
:is(.sheet,.r9-systems,.contact-section,.service-contact) .wrap{width:calc(100% - 2 * max(20px, var(--edge) - var(--sheet-gap)))}
.sheet .privacy-shell{width:min(1296px,calc(100% - 2 * max(20px, var(--edge) - var(--sheet-gap))))}

/* The pale green bands are trays set into the sheet rather than stripes across the screen. */
.sheet .service-band{margin-inline:var(--sheet-gap);border-radius:calc(var(--sheet-r) - var(--sheet-gap))}
.sheet>.service-band:first-child{margin-top:var(--sheet-gap)}
.sheet>.service-band:last-child{margin-bottom:var(--sheet-gap)}

/* The footer lies on the desk itself, in light type. */
.site-footer.site-footer{background:transparent;color:#e9ece6}
.site-footer .footer-top>p,.site-footer .footer-bottom,.site-footer .motion-toggle{color:#93a099}
.site-footer .footer-up{color:#c9d1cb}
.site-footer .footer-contact a{text-decoration-color:rgb(233 236 230 / .32)}
.site-footer .footer-map{border-top-color:rgb(233 236 230 / .12)}
.site-footer .footer-heading{color:#7f8c85}
.site-footer .footer-map a{color:#e9ece6}
.site-footer .footer-map a:hover,.site-footer .footer-map a[aria-current=page]{color:var(--l-coral)}
.site-footer :is(a,button):focus-visible{outline:2px solid var(--l-coral);outline-offset:3px}