/* The Credo background is the common page surface. */
:root{--paper:#e7e2d8;--linen:#f5f4ef;--sand:#e7e2d8;--fact-size:15px}
html,body,body main,body footer,body main>section,body main>div{background-color:var(--paper)}
/* Route changes focus the content landmark; controls retain their visible focus styles. */
main#inhalt[tabindex="-1"]:focus{outline:none}
.link-arrow{display:inline-block;width:1em;height:1em;max-width:none;flex:0 0 1em;vertical-align:-.12em}
/* Keep the mobile menu within its own header, clear of the scrolling copy. */
@media(max-width:700px){
 body:not(.folio-home) header{position:sticky;inset:auto;top:0;z-index:105;height:72px;min-height:72px;padding:12px 24px;background:var(--paper);flex-wrap:nowrap}
 body:not(.folio-home) header .brand{max-width:calc(100% - 72px)}
 body:not(.folio-home) header .brand .brand-wordmark{width:190px;max-width:100%;height:auto}
 body:not(.folio-home) header .menu-toggle{position:absolute;top:9px;right:15px}
 body:not(.folio-home) header .menu-toggle:hover .menu-line{background:var(--red);color:var(--red)}
 body:not(.folio-home) main{padding-top:0}
}
/* Contact keeps its original dark red surface and original light text styles. */
body.quiet-contact{--paper:#2e0000}
body .source-credo,body .story-change,body .story-contact,body .contact-cta,body .studio-attitude,body .process,body .studio-services,body .portrait-section,body .projects-section,body .jobs-invitation{background:var(--paper);color:var(--ink)}
body .story-contact h2,body .story-contact p,body .story-contact .arrow-link,body .contact-cta h2,body .contact-cta p,body .contact-cta .arrow-link{color:var(--ink);border-color:var(--line)}
body #image-viewer{background:var(--paper);color:var(--ink)}
body #image-viewer figcaption,body #image-viewer .viewer-close{color:var(--ink)}

/* Bring service copy closer to its heading while retaining the numbered rows. */
body .service-row{grid-template-columns:32px minmax(180px,.65fr) minmax(0,1.75fr);column-gap:clamp(18px,2vw,28px)}
body .service-row>div{grid-column:3}
body .local-questions h2,body .local-questions h3{color:var(--red)}
@media(max-width:1000px){body .service-row{grid-template-columns:28px minmax(0,1fr);column-gap:18px;row-gap:16px}body .service-row>div{grid-column:2}}

/* Scale the complete original logo lockup together on the homepage. */
body.folio-home header .brand .brand-full{width:min(clamp(84px,calc(18vw + 46px),168px),36vh);height:auto;max-width:100%}

/* Alternating warm bands divide the careers page into readable sections. */
body.quiet-careers .jobs-offer,body.quiet-careers .jobs-invitation{max-width:none;padding-inline:max(var(--pad),calc((100vw - 1400px)/2 + var(--pad)))}
body.quiet-careers .jobs-offer{background:#ddd7cc;padding-top:60px;padding-bottom:65px}
body.quiet-careers .jobs-work{padding-top:60px}
body.quiet-careers .jobs-invitation{background:#d5cdbf}
@media(max-width:600px){body.quiet-careers .jobs-offer,body.quiet-careers .jobs-invitation{padding:45px 24px}body.quiet-careers .jobs-work{padding-top:45px}}

/* Leave two lines of body text between the project image and both text columns. */
body.quiet-project .project-reading{margin-top:calc(var(--text-size) * 3.3)}

/* Compact facts have internal separators, without an outer frame. */
body .project-data{width:100%;max-width:340px;justify-self:start;padding-top:6px;border:0;box-shadow:none;background:transparent}
body .project-data,body .project-data *{font-size:var(--fact-size)!important;line-height:1.45}
body .project-data dl{display:block;margin:0}
body .project-data dl>div{margin:0;padding:11px 0;border:0}
body .project-data dl>div:first-child{padding-top:0}
body .project-data dl>div+div{border-top:1px solid #c9c8c6}
body .project-data dt{margin:0 0 4px;color:var(--muted);line-height:1.35}
body .project-data dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
@media(max-width:900px){body .project-data{max-width:480px}}

/* Display the portrait inside its photographed edges (22 px left, 12 px bottom at 1280 px). */
body .maurice-profile .studio-portrait{margin:0;width:100%;aspect-ratio:1256 / 1266;overflow:hidden;border:0;padding:0;box-shadow:none}
body .maurice-profile .studio-portrait>img{display:block;width:calc(100% * 1280 / 1256);max-width:none;height:auto;min-height:0;max-height:none;margin-left:calc(-100% * 23 / 1256);object-fit:cover;border:0;padding:0;box-shadow:none}
/* The adjacent copy sets the portrait height while both columns are side by side. */
@media(min-width:801px){
 body.quiet-studio .maurice-profile{align-items:stretch}
 body.quiet-studio .maurice-profile .studio-portrait{position:relative;aspect-ratio:auto;min-height:0;align-self:stretch}
 body.quiet-studio .maurice-profile .studio-portrait>img{position:absolute;top:0;left:0;height:calc(100% * 1280 / 1266);object-position:53% 0}
 body.quiet-studio .maurice-profile>div>p:last-child{margin-bottom:0}
}

/* The requested gentle dissolve also applies when system motion is reduced. */
body.folio-home .atmosphere .atmosphere-slide{visibility:visible;transition:opacity 1.5s ease-in-out!important}
body.folio-home .atmosphere .atmosphere-slide.is-previous{opacity:1;visibility:visible;transition:none!important}
body.folio-home .atmosphere .atmosphere-slide.is-active{opacity:1;visibility:visible;transition:opacity 1.5s ease-in-out!important}