/* Fluid layout, a half-window menu, and complete photographs at every size. */
html,body{width:100%;min-width:0}
body{overflow-x:visible}
main,footer{min-width:0;max-width:100%}
p,h1,h2,h3,h4,address{overflow-wrap:break-word}
img,picture,video,svg{max-width:100%}
.footer-top>*,.office-profile>*,.studio-section-head>*,.service-row>*,.project-photo-sequence>*,.jobs-work>*{min-width:0}
.footer-bottom,.footer-bottom>div,.portfolio-toolbar,.portfolio-filters{flex-wrap:wrap;min-width:0;max-width:100%}
.footer-top{grid-template-columns:clamp(72px,8vw,140px) minmax(0,max-content) minmax(0,max-content);column-gap:clamp(20px,4vw,64px)}
.footer-top>.footer-brand{width:100%;max-width:140px}
.footer-top>.footer-brand .footer-symbol{width:100%;height:auto}

header nav,header nav.open{
  position:fixed;inset:0 auto 0 0;width:50%;max-width:50%;height:100vh;height:100dvh;
  min-height:0;max-height:none;display:flex;flex-direction:column;
  align-items:stretch;justify-content:flex-start;gap:0;
  padding:clamp(20px,5vh,64px) clamp(14px,4vw,80px);
  background:rgba(46,0,0,.88);overflow-x:hidden;overflow-y:auto;
}
header nav:before{content:none;display:none}
header nav .menu-links{
  position:static;left:auto;right:auto;top:auto;bottom:auto;transform:none!important;
  width:100%;max-width:100%;max-height:none;align-self:stretch;
  margin:auto 0;padding:0;overflow:visible;flex-shrink:0;
}
header nav .menu-links .menu-primary{
  line-height:1.18;
  letter-spacing:-.03em;padding:6px 0;min-height:38px;max-width:100%;
  margin-left:auto;text-align:right;overflow-wrap:anywhere;
}
header nav .menu-contact{
  position:static;left:auto;right:auto;top:auto;bottom:auto;transform:none!important;
  width:100%;max-width:100%;align-self:stretch;align-items:flex-end;
  margin:24px 0 auto;padding:0;gap:8px;flex-shrink:0;
}
header nav .menu-contact a{max-width:100%;overflow-wrap:anywhere}
.menu-is-open header .brand{visibility:hidden;pointer-events:none}
.menu-backdrop{display:block!important;position:fixed;inset:0;z-index:100;background:transparent;visibility:hidden;pointer-events:none}
.menu-is-open .menu-backdrop{visibility:visible;pointer-events:auto}

.folio-home .atmosphere{height:100vh;height:100dvh;min-height:0;max-height:none;width:100%;background:var(--paper)}
.folio-home .atmosphere-slide{background:var(--paper)}
.folio-home .atmosphere .atmosphere-slide>img{width:100%;height:100%;max-width:100%;object-fit:cover;object-position:var(--focal,50% 50%);filter:none}
.folio-home header .brand .brand-full{width:min(clamp(72px,calc(16vw + 38px),140px),32vh);height:auto}
.folio-home .slide-caption{top:clamp(78px,16vh,116px);right:var(--pad);max-width:calc(100% - 2 * var(--pad))}
.folio-home .atmosphere .slide-caption .slide-words{}
.folio-home .slideshow-controls{bottom:max(18px,env(safe-area-inset-bottom));max-width:calc(100% - 32px)}
.folio-home .slide-dots button{flex:0 1 20px}
.photo-portfolio .portfolio-tile img{width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:auto;object-fit:contain}
/* Leave the start of the project description visible below the complete photo. */
.quiet-project{--project-hero-height:max(140px,min(60vh,calc(100vh - 300px),660px))}
@supports(height:100svh){.quiet-project{--project-hero-height:max(140px,min(60svh,calc(100svh - 300px),660px))}}
.quiet-project .project-back{margin-bottom:18px}
.quiet-project .project-opening-image{position:relative;width:min(100%,calc(var(--project-hero-height) * var(--project-hero-ratio)));max-width:100%;margin-inline:auto}
.project-hero-stage{position:relative;width:100%}
.quiet-project .project-opening-image .gallery-open img{display:block;width:100%;height:auto;min-height:0;max-height:var(--project-hero-height);aspect-ratio:auto;object-fit:contain;margin-inline:auto}
.quiet-project .project-opening>figure:not(.project-opening-image) img{width:auto;max-width:100%;height:auto;max-height:var(--project-hero-height);object-fit:contain;margin-inline:auto}
.quiet-project .project-reading{margin-top:28px}
.quiet-project .project-story h1{margin-bottom:20px}
.project-image-controls,.viewer-controls{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:16px;flex-shrink:0}
.project-hero-stage .project-image-prev,.project-hero-stage .project-image-next{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;padding:0;border:0;background:transparent;color:var(--red);opacity:1;cursor:pointer}
.project-image-prev svg,.project-image-next svg{width:18px;height:27px}
#image-viewer{--viewer-height:94vh;height:var(--viewer-height);max-height:var(--viewer-height);padding:60px clamp(18px,4vw,65px) 25px}
#image-viewer:not([open]){display:none}
@supports(height:100dvh){#image-viewer{--viewer-height:94dvh}}
#image-viewer figure{min-height:0;margin:0}
#viewer-image{max-height:max(60px,calc(var(--viewer-height) - 230px));min-height:0;flex-shrink:1}
#image-viewer .viewer-controls button{position:static;inset:auto;transform:none;display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;background:transparent;color:var(--red);padding:0;cursor:pointer}
.viewer-prev .angle-icon,.viewer-next .angle-icon{width:18px;height:27px}
#image-viewer .viewer-controls button:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.project-hero-stage .project-image-prev:hover,.project-hero-stage .project-image-next:hover{opacity:1;color:var(--red)}
.project-hero-stage button:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.project-main-caption{display:flex;flex-wrap:wrap;gap:10px 24px}
.project-main-caption a{text-decoration:underline;text-underline-offset:3px}
.quiet-project .project-follow{padding-bottom:50px}
.project-follow .project-return{flex-shrink:0}
.project-follow .project-return:hover span{transform:translateX(-3px)}
.photo-portfolio .portfolio-tile figure{aspect-ratio:auto;height:auto;overflow:visible;background:transparent}
.photo-portfolio .portfolio-tile a:hover img{transform:none}
@media(max-width:700px){
  .quiet-project{--project-hero-height:max(110px,min(57vh,calc(100vh - 270px),560px))}
  @supports(height:100svh){.quiet-project{--project-hero-height:max(110px,min(57svh,calc(100svh - 270px),560px))}}
  .quiet-project .project-reading{margin-top:22px}
  .project-hero-stage .project-image-prev,.project-hero-stage .project-image-next{flex-basis:44px;width:44px;height:48px}
  #image-viewer{--viewer-height:90vh;padding:55px 18px 20px}
  @supports(height:100dvh){#image-viewer{--viewer-height:90dvh}}
  .project-image-prev svg,.project-image-next svg{width:16px;height:24px}
  .viewer-prev .angle-icon,.viewer-next .angle-icon{width:18px;height:27px}
  .folio-home .atmosphere .atmosphere-slide>img{object-position:var(--focal-mobile,50% 50%)}
  .footer-top{grid-template-columns:100px minmax(0,1fr);column-gap:24px}
  .footer-top>.footer-brand{grid-column:1;grid-row:1}
  .footer-top>p:first-of-type{grid-column:2;grid-row:1}
  .footer-top>p:last-of-type{grid-column:2;grid-row:2}
  .folio-home .atmosphere .slide-caption .slide-words{}
}
@media(max-width:500px){
  .footer-top{grid-template-columns:minmax(0,1fr)}
  .footer-top>.footer-brand,.footer-top>p:first-of-type,.footer-top>p:last-of-type{grid-column:1;grid-row:auto}
}