*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --paper:#fdfcf8;
  --ink:#1a1a18;
  --ink2:rgba(26,26,24,.55);
  --ink3:rgba(26,26,24,.28);
  --ink4:rgba(26,26,24,.1);
  --red:#c8202e;
  --earth:#7a5c3a;
  --earth2:rgba(122,92,58,.45);
  --frame:16px;
  --sidebar:220px;
  --sidebar-expanded:470px;
  --mobile-menu-height:0px;
  --aura:#fdfcf8;
  --aura-t:1s;
}

html,body{
  width:100%;
  height:100%;
  overflow:hidden;
  background:var(--paper);
  color:var(--ink);
  font-family:'DM Sans',sans-serif;
  font-weight:300;
  cursor:none;
}

body.intro-active .content-project-bar,
body.intro-active #top-bar,
body.intro-active #works-panel,
body.intro-active #contact-panel,
body.intro-active #cursor-ring,
body.intro-active #cursor-dot,
body.intro-active #cursor-label{
  opacity:0;
  pointer-events:none;
}

#landing-screen{
  position:absolute;
  inset:0;
  z-index:0;
  background:var(--paper);
  opacity:1;
  pointer-events:none;
}

body.intro-active #app-view.is-landing-home #landing-screen{
  position:fixed;
  inset:0;
  z-index:1200;
}

#landing-video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  background:var(--paper);
  opacity:1;
}

#landing-audio-toggle{
  position:absolute;
  right:1.25rem;
  bottom:1.25rem;
  z-index:1201;
  background:none;
  border:none;
  cursor:none;
  font-family:'DM Sans',sans-serif;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(253,252,248,.8);
  transition:opacity .25s,color .25s;
  pointer-events:auto;
}

#landing-audio-toggle:hover{
  color:var(--paper);
}

#landing-play-toggle{
  position:absolute;
  left:1.25rem;
  bottom:1.25rem;
  z-index:1201;
  background:none;
  border:none;
  cursor:none;
  font-family:'DM Sans',sans-serif;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(253,252,248,.8);
  transition:opacity .25s,color .25s;
  pointer-events:auto;
}

#landing-play-toggle:hover{
  color:var(--paper);
}

#landing-progress{
  position:absolute;
  left:50%;
  bottom:1.62rem;
  transform:translateX(-50%);
  z-index:1201;
  width:min(18rem, calc(100vw - 10rem));
  height:1.5rem;
  pointer-events:auto;
  cursor:none;
}

#landing-progress::before{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  transform:translateY(-50%);
  background:rgba(253,252,248,.28);
}

#landing-progress-bar{
  display:block;
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  transform:translateY(-50%) scaleX(0);
  transform-origin:left center;
  width:100%;
  background:rgba(253,252,248,.9);
}

#aura{
  position:fixed;
  inset:0;
  z-index:0;
  background:var(--aura);
  transition:background var(--aura-t) ease-out;
  pointer-events:none;
}

#cursor-ring{
  position:fixed;
  width:36px;
  height:36px;
  border:1px solid var(--ink);
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .35s cubic-bezier(.25,.46,.45,.94),height .35s,border-color .35s,background .35s,opacity .35s;
  mix-blend-mode:multiply;
  opacity:1;
}

#cursor-dot{
  position:fixed;
  width:4px;
  height:4px;
  background:var(--red);
  border-radius:50%;
  pointer-events:none;
  z-index:10000;
  transform:translate(-50%,-50%);
  transition:transform .1s;
}

#cursor-label{
  position:fixed;
  font-size:1.18rem;
  letter-spacing:0;
  text-transform:none;
  color:var(--red);
  font-family:'DM Sans',sans-serif;
  pointer-events:none;
  z-index:10001;
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity .25s;
  white-space:nowrap;
  font-weight:800;
  transform:translate(-50%,-54%);
  line-height:1;
}

#cursor-ring.play{
  width:60px;
  height:60px;
  background:var(--ink);
  border-color:var(--ink);
}

#cursor-ring.play + #cursor-dot{opacity:0}
#cursor-ring.play ~ #cursor-label{opacity:1}

#cursor-ring.view{
  width:56px;
  height:56px;
  background:var(--red);
  border-color:var(--red);
}

#cursor-ring.view ~ #cursor-label{opacity:1}

#cursor-ring.drag{
  width:70px;
  height:70px;
  background:var(--red);
  border-color:var(--red);
}

#cursor-ring.drag ~ #cursor-label{opacity:1}

#cursor-ring.nav-left,
#cursor-ring.nav-right{
  width:36px;
  height:36px;
  background:transparent;
  border-color:var(--ink);
}

#cursor-ring.nav-left + #cursor-dot,
#cursor-ring.nav-right + #cursor-dot{
  opacity:0;
}

#cursor-ring.nav-left ~ #cursor-label,
#cursor-ring.nav-right ~ #cursor-label{
  opacity:1;
}

#top-bar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:56px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 1rem;
  z-index:140;
  pointer-events:none;
}

#mobile-menu-toggle{
  display:none;
  pointer-events:auto;
}

#mobile-menu{
  display:none;
}

.mobile-project-overlay{
  display:none;
}

#desktop-gallery-toggle{
  position:fixed;
  right:1rem;
  bottom:3rem;
  z-index:190;
  background:none;
  border:none;
  cursor:none;
  font-family:'DM Sans',sans-serif;
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--earth);
  pointer-events:auto;
  transition:opacity .2s,color .2s;
}

#desktop-gallery-toggle:hover{
  color:var(--ink);
}


.desktop-gallery-overlay{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  background-color:rgba(122,92,58,.56);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:var(--paper);
  overflow:hidden;
  z-index:230;
  opacity:1;
  transform:translateY(100%);
  visibility:hidden;
  pointer-events:none;
  transition:transform .88s cubic-bezier(.12,.92,.18,1), visibility 0s linear .88s;
}

.desktop-gallery-overlay.open{
  transform:translateY(0);
  visibility:visible;
  pointer-events:auto;
  transition:transform .88s cubic-bezier(.12,.92,.18,1), visibility 0s linear 0s;
}

.desktop-gallery-overlay-header{
  position:absolute;
  top:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:1rem 1rem 0;
  z-index:1;
}

#desktop-gallery-close{
  background:none;
  border:none;
  padding:0;
  cursor:none;
  font-family:'DM Sans',sans-serif;
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--paper);
}

.desktop-gallery-overlay-title{
  padding:1rem 1rem 0;
  font-family:'DM Sans',sans-serif;
  font-weight:400;
  font-size:.74rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(253,252,248,.78);
}

.desktop-gallery-grid{
  display:block;
  padding:1.35rem 1rem 1.25rem;
  overflow:auto;
  min-height:0;
  -webkit-mask-image:linear-gradient(
    to bottom,
    transparent 0,
    rgba(0,0,0,.88) 3.75rem,
    rgba(0,0,0,1) calc(100% - 3.75rem),
    transparent 100%
  );
  mask-image:linear-gradient(
    to bottom,
    transparent 0,
    rgba(0,0,0,.88) 3.75rem,
    rgba(0,0,0,1) calc(100% - 3.75rem),
    transparent 100%
  );
}

.desktop-gallery-project + .desktop-gallery-project{
  margin-top:2rem;
}

.desktop-gallery-project-title{
  position:relative;
  display:inline-block;
  margin:0 0 .9rem;
  font-family:'DM Sans',sans-serif;
  font-weight:400;
  font-size:.74rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(253,252,248,.78);
}

.desktop-gallery-project.is-active-project .desktop-gallery-project-title{
  color:var(--paper);
}

.desktop-gallery-project-title::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-.18rem;
  width:0;
  height:.5px;
  background:var(--red);
  transition:width .3s cubic-bezier(.25,.46,.45,.94);
}

.desktop-gallery-project.is-active-project .desktop-gallery-project-title::after{
  width:100%;
}

.desktop-gallery-project-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(132px, 1fr));
  gap:.8rem;
}

.desktop-gallery-item{
  position:relative;
  background:none;
  border:none;
  padding:0;
  cursor:none;
  aspect-ratio:1 / 1;
  overflow:hidden;
  opacity:.92;
  transition:opacity .18s ease, transform .18s ease;
}

.desktop-gallery-item:hover,
.desktop-gallery-item.is-active{
  opacity:1;
  transform:translateY(-1px);
}

.desktop-gallery-item.is-active{
  outline:1px solid rgba(253,252,248,.92);
  outline-offset:2px;
}

.desktop-gallery-placeholder{
  position:absolute;
  inset:0;
  display:block;
  background:rgba(253,252,248,.12);
  opacity:1;
  transition:opacity .18s ease .12s;
}

.desktop-gallery-item.is-ready .desktop-gallery-placeholder,
.desktop-gallery-item.is-error .desktop-gallery-placeholder{
  opacity:0;
}

.desktop-gallery-thumb{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  opacity:0;
  transition:opacity .18s ease;
}

.desktop-gallery-item.is-ready .desktop-gallery-thumb{
  opacity:1;
}

.desktop-gallery-loader{
  position:absolute;
  top:50%;
  left:50%;
  display:block;
  z-index:2;
  width:20px;
  height:20px;
  margin:-10px 0 0 -10px;
  border-radius:50%;
  border:1px solid rgba(253,252,248,.3);
  border-top-color:rgba(253,252,248,.92);
  animation:gallerySpin .8s linear infinite;
  opacity:1;
  transition:opacity .18s ease .12s;
}

.desktop-gallery-item.is-ready .desktop-gallery-loader,
.desktop-gallery-item.is-error .desktop-gallery-loader{
  opacity:0;
}

.desktop-gallery-item.is-error{
  background:rgba(253,252,248,.03);
}

@keyframes gallerySpin{
  to{
    transform:rotate(360deg);
  }
}

.desktop-gallery-video-badge{
  position:absolute;
  z-index:3;
  right:.55rem;
  bottom:.45rem;
  font-family:'DM Sans',sans-serif;
  font-size:.6rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(253,252,248,.92);
  text-shadow:0 1px 8px rgba(0,0,0,.24);
}

.top-bar-section{
  display:flex;
  align-items:center;
  gap:1rem;
  flex:1 1 0;
}

.top-bar-section:nth-child(3){
  justify-content:center;
}

.top-bar-section:nth-child(-n+2){
  justify-content:flex-start;
}

.top-bar-section:nth-child(n+4){
  justify-content:flex-end;
}

.top-bar-button{
  background:none;
  border:none;
  padding:0;
  cursor:none;
  font-family:'DM Sans',sans-serif;
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--earth);
  transition:color .2s;
  pointer-events:auto;
}

.top-bar-button:hover{color:var(--ink)}

#sig-wrap{
  height:68px;
  width:216px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:none;
  padding:0;
  cursor:none;
  pointer-events:auto;
}

#sig-image{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.side-panel{
  position:fixed;
  top:0;
  bottom:0;
  width:var(--sidebar);
  background-color:rgba(122,92,58,.5);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:0;
  border-right:.5px solid rgba(122,92,58,.3);
  transition:transform .42s cubic-bezier(.22,1,.36,1),width .42s cubic-bezier(.22,1,.36,1);
  z-index:200;
  color:var(--paper);
  overflow:hidden;
}

#works-panel{
  left:0;
  transform:translateX(-100%);
  padding:0;
}

#works-panel.has-projects{
  width:var(--sidebar-expanded);
}

#works-panel.open{
  transform:translateX(0);
}

#contact-panel{
  right:0;
  border-right:none;
  border-left:.5px solid rgba(122,92,58,.3);
  transform:translateX(100%);
  padding:0;
}

#contact-panel.open{
  transform:translateX(0);
}

.contact-panel-inner{
  display:flex;
  flex-direction:column;
  gap:.45rem;
  padding:.4rem 1rem 1rem;
}

.contact-project-group{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  min-height:0;
  padding-top:1rem;
}

.works-panel-inner{
  display:grid;
  grid-template-columns:220px 1fr;
  grid-template-rows:minmax(0,1fr) auto;
  height:100%;
  align-items:start;
}

.works-nav-col{
  padding:.4rem 1rem 0 1rem;
  padding-right:1rem;
}

.project-nav-col{
  grid-column:2;
  grid-row:1 / span 2;
  display:flex;
  flex-direction:column;
  align-self:stretch;
  opacity:0;
  pointer-events:none;
  transform:translateX(.6rem);
  transition:opacity .34s cubic-bezier(.22,1,.36,1),transform .34s cubic-bezier(.22,1,.36,1);
  border-left:.5px solid rgba(253,252,248,.14);
  padding:0 1rem 0 1rem;
  height:100%;
  min-height:0;
  overflow:hidden;
}

#works-panel.has-projects .project-nav-col{
  opacity:1;
  pointer-events:auto;
  transform:translateX(0);
}

.works-contact{
  grid-column:1;
  grid-row:2;
  padding:0 1rem 1rem 1rem;
  align-self:end;
}

.sidebar-tagline{
  font-family:'Caveat',cursive;
  font-size:.8rem;
  color:var(--red);
  margin-bottom:1.5rem;
  line-height:1.4;
  opacity:0;
  animation:fadeIn .8s 2.5s forwards;
}

.sidebar-section{
  font-size:.52rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(253,252,248,.5);
  margin-bottom:.6rem;
  font-weight:500;
}

.nav-item{
  display:block;
  width:100%;
  text-align:left;
  background:none;
  border:none;
  cursor:none;
  font-family:'DM Sans',sans-serif;
  font-weight:300;
  font-size:.75rem;
  letter-spacing:.04em;
  color:rgba(253,252,248,.72);
  padding:.45rem 0;
  border-bottom:.5px solid transparent;
  transition:color .2s,border-color .2s;
  position:relative;
  text-decoration:none;
}

.nav-item::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:.5px;
  background:var(--red);
  transition:width .3s cubic-bezier(.25,.46,.45,.94);
}

.nav-item:hover,
.nav-item.on{
  color:var(--paper);
}

.nav-item:hover::after,
.nav-item.on::after{
  width:100%;
}

.project-nav-list{
  display:grid;
  flex:1 1 auto;
  gap:.06rem;
  align-content:start;
  margin-top:.35rem;
  min-height:0;
  overflow:auto;
}

.contact-project-list{
  display:grid;
  gap:.06rem;
  align-content:start;
  margin-top:.55rem;
}

.contact-panel-inner .sidebar-section{
  margin-top:.25rem;
  margin-bottom:.15rem;
}

.project-link{
  display:flex;
  align-items:center;
  gap:.45rem;
  width:100%;
  text-align:left;
  background:none;
  border:none;
  cursor:none;
  padding:.32rem 0;
  color:rgba(253,252,248,.72);
  font-family:'DM Sans',sans-serif;
  font-size:.73rem;
  letter-spacing:.04em;
  transition:color .2s;
}

.project-link-label{
  min-width:0;
}

.project-link:hover,
.project-link.on{
  color:var(--paper);
}

.project-type-dot{
  width:4px;
  height:4px;
  flex:0 0 4px;
  border-radius:50%;
  background:rgba(253,252,248,.32);
  opacity:.58;
}

.project-type-dot.is-photography{
  background:#0367A6;
}

.project-type-dot.is-film{
  background:#BF4949;
}

.project-nav-legend{
  margin-top:auto;
  padding:1rem 0 .55rem;
}

.project-nav-legend-divider{
  margin-bottom:.7rem;
}

.project-nav-legend-item{
  display:flex;
  align-items:center;
  gap:.45rem;
  font-family:'DM Sans',sans-serif;
  font-size:.68rem;
  letter-spacing:.04em;
  color:rgba(253,252,248,.62);
}

.project-nav-legend-item + .project-nav-legend-item{
  margin-top:.3rem;
}

.works-contact-link{
  color:rgba(253,252,248,.72);
}

.works-contact-link:hover{
  color:var(--paper);
}

.site-credit{
  margin-top:1rem;
  font-family:'DM Sans',sans-serif;
  font-size:.68rem;
  letter-spacing:.08em;
  color:rgba(253,252,248,.62);
}

.nav-divider{
  width:100%;
  height:.5px;
  background:rgba(253,252,248,.14);
  margin:0 0 1rem;
}

#layout{
  position:fixed;
  inset:8px;
  z-index:2;
  height:calc(100vh - 16px);
  opacity:1;
  transition:opacity 3s ease,inset 3s ease,height 3s ease;
}

#main{
  position:relative;
  overflow:hidden;
  margin-top:56px;
  height:calc(100% - 56px);
  padding-left:2rem;
  transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .5s,margin-top 3s ease,height 3s ease,padding-left 3s ease;
}

#top-bar,
#works-panel,
#contact-panel{
  transition:opacity 3s ease,transform .42s cubic-bezier(.22,1,.36,1),width .42s cubic-bezier(.22,1,.36,1);
}

.content-shell{
  min-height:100%;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  padding:1.25rem 2rem 2rem 0;
}

.content-stage{
  display:grid;
  place-items:center;
  min-height:100%;
}

.content-center{
  width:100%;
  text-align:center;
  padding:0;
}

.content-header{
  max-width:36rem;
  margin:0 auto;
  padding:2rem 1rem 0;
}

.content-parent{
  font-family:'Caveat',cursive;
  font-size:1rem;
  color:var(--earth);
  margin-bottom:.5rem;
}

.content-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(3rem,8vw,6rem);
  font-weight:400;
  line-height:.95;
  color:var(--ink);
}

.content-copy{
  margin-top:1rem;
  font-size:.9rem;
  line-height:1.7;
  color:var(--ink2);
}

.content-copy p{
  margin:0 0 1rem;
}

.content-copy h2{
  margin:1.4rem 0 .45rem;
  font-family:'DM Sans',sans-serif;
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
}

.content-copy a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:.18em;
}

.content-copy strong{
  color:var(--ink);
  font-weight:500;
}

.content-media-shell{
  margin-top:2.5rem;
}

.content-empty{
  max-width:34rem;
  margin:0 auto;
  font-size:.78rem;
  line-height:1.7;
  color:var(--ink2);
}

.content-empty code,
.content-empty span{
  font-family:'DM Sans',sans-serif;
  font-size:inherit;
}

.content-media-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  margin-top:1.5rem;
}

.content-media-grid:empty{
  display:none;
}

.media-card{
  text-align:left;
  position:relative;
}

.media-card-video{
  pointer-events:none;
}

.slideshow-hitareas{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  z-index:2;
}

.slideshow-hitarea{
  background:none;
  border:none;
  cursor:none;
  padding:0;
}

.slideshow-hitarea:disabled{
  pointer-events:none;
}

.slideshow-hitarea-left{
  cursor:none;
}

.slideshow-hitarea-right{
  cursor:none;
}

.slideshow-controls{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:1rem 1.25rem;
}

.slideshow-button{
  background:none;
  border:none;
  cursor:none;
  font-family:'DM Sans',sans-serif;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink2);
  transition:color .2s, opacity .2s;
}

.slideshow-button:hover{
  color:var(--ink);
}

.slideshow-button:disabled{
  opacity:.35;
}

.slideshow-counter{
  font-family:'DM Sans',sans-serif;
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink2);
}

.media-frame{
  position:relative;
  overflow:hidden;
  background:transparent;
  min-height:calc(100vh - 100px);
}

.media-frame.has-video-controls{
  z-index:1;
  pointer-events:none;
}

.media-frame.is-loading{
  background:transparent;
}

.media-frame img,
.media-frame video{
  width:100%;
  height:calc(100vh - 100px);
  display:block;
  object-fit:contain;
  object-position:center;
}

.media-frame.has-video-controls video{
  pointer-events:none;
}

.media-frame.has-video-controls.is-loading .video-center-play,
.media-frame.has-video-controls.is-buffering .video-center-play{
  opacity:0;
}

.media-asset{
  opacity:0;
  transition:opacity .18s ease;
}

.media-asset.is-ready{
  opacity:1;
}

.video-controls{
  position:absolute;
  left:1.25rem;
  right:1.25rem;
  bottom:1.25rem;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:1rem;
  pointer-events:none;
  z-index:3;
}

.video-toggle,
.video-audio-toggle{
  background:none;
  border:none;
  padding:0;
  cursor:none;
  pointer-events:auto;
  font-family:'DM Sans',sans-serif;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(253,252,248,.92);
  transition:opacity .25s,color .25s;
  text-shadow:0 1px 10px rgba(0,0,0,.28);
  appearance:none;
  -webkit-appearance:none;
  position:relative;
  z-index:4;
}

.video-toggle{
  grid-column:1;
  justify-self:start;
}

.video-progress{
  grid-column:2;
  position:relative;
  height:1.5rem;
  width:min(100%, 18rem);
  justify-self:center;
  pointer-events:auto;
  cursor:none;
  z-index:4;
}

.video-progress::before{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  transform:translateY(-50%);
  background:rgba(253,252,248,.28);
}

.video-progress-bar{
  display:block;
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  transform:translateY(-50%) scaleX(0);
  transform-origin:left center;
  width:100%;
  background:rgba(253,252,248,.9);
}

.video-audio-toggle{
  grid-column:3;
  justify-self:end;
}

.video-toggle:hover,
.video-audio-toggle:hover{
  color:var(--paper);
}

.video-center-play{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  border:none;
  background:none;
  color:rgba(253,252,248,.8);
  display:grid;
  place-items:center;
  pointer-events:auto;
  cursor:none;
  transition:opacity .18s ease, color .18s ease;
  z-index:3;
  padding:0;
  font-family:'DM Sans',sans-serif;
  font-size:2.9rem;
  letter-spacing:0;
  text-transform:none;
  text-shadow:0 2px 14px rgba(0,0,0,.28);
}

.media-card-video .video-controls,
.media-card-video .video-center-play{
  pointer-events:auto;
}

.video-center-play.is-hidden{
  opacity:0;
  pointer-events:none;
}

.video-center-play-icon{
  display:block;
  line-height:1;
  transform:translateX(.08rem);
}

.media-caption{
  padding:.75rem 1rem 1.5rem;
  font-size:.72rem;
  line-height:1.6;
  color:var(--ink2);
  text-align:center;
}

.content-project-bar{
  display:flex;
  justify-content:space-evenly;
  align-items:center;
  gap:1rem;
  min-height:34px;
  padding:.55rem .55rem;
  transition:opacity 3s ease;
}

.content-project-bar > *{
  flex:1 1 0;
}

.content-project-label{
  font-family:'DM Sans',sans-serif;
  font-weight:500;
  font-size:.86rem;
  letter-spacing:.04em;
  color:var(--ink2);
  text-align:center;
}

.content-project-title-block{
  display:grid;
  justify-items:center;
  gap:.16rem;
  min-width:0;
}

.content-project-subtitle{
  margin:0;
  font-family:'DM Sans',sans-serif;
  font-weight:300;
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(26,26,24,.72);
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:32vw;
}

.content-project-meta{
  font-family:'DM Sans',sans-serif;
  font-weight:300;
  font-size:.78rem;
  letter-spacing:.04em;
  color:var(--ink2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.content-project-role{
  text-align:left;
}

.content-project-location{
  text-align:right;
}

.site-view{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transform:translateY(1.5rem);
  transition:opacity .45s cubic-bezier(.4,0,.2,1),transform .45s cubic-bezier(.4,0,.2,1);
}

.site-view.is-active{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

#app-view{
  overflow:hidden;
}

#app-view.has-media .content-stage{
  display:block;
  min-height:0;
  height:100%;
  overflow:hidden;
}

#app-view.has-media .content-header{
  display:none;
}

#app-view.has-media .content-media-shell{
  margin-top:0;
  height:100%;
  position:relative;
}

#app-view.has-media .content-empty{
  display:none;
}

#app-view.has-media .content-shell{
  grid-template-rows:minmax(0,1fr) auto;
  min-height:100%;
  height:100%;
  padding:0;
}

.video-buffer-indicator{
  position:absolute;
  top:50%;
  left:50%;
  z-index:4;
  width:28px;
  height:28px;
  margin:-14px 0 0 -14px;
  border-radius:50%;
  border:1.2px solid rgba(253,252,248,.28);
  border-top-color:rgba(253,252,248,.92);
  opacity:0;
  pointer-events:none;
  animation:gallerySpin .8s linear infinite;
  transition:opacity .18s ease;
}

.media-frame.has-video-controls.is-loading .video-buffer-indicator,
.media-frame.has-video-controls.is-buffering .video-buffer-indicator{
  opacity:1;
}

#app-view.has-media .content-center{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
}

#app-view.has-media .content-media-grid{
  flex:1;
  height:100%;
  margin-top:0;
  min-height:0;
}

#app-view.has-media .media-card{
  height:100%;
  min-height:0;
}

#app-view.has-media .media-frame{
  min-height:100%;
  height:100%;
}

#app-view.has-media .media-frame img,
#app-view.has-media .media-frame video{
  height:100%;
}

#app-view.has-media .media-caption{
  display:none;
}

#app-view.has-media .content-project-label{
  color:var(--ink);
}

#app-view.has-media .slideshow-controls{
  display:none;
}

#app-view.is-landing-home .content-header,
#app-view.is-landing-home .content-empty,
#app-view.is-landing-home .slideshow-hitareas,
#app-view.is-landing-home .slideshow-controls{
  display:none;
}

#app-view.is-landing-home .content-shell{
  grid-template-rows:minmax(0,1fr) auto;
  min-height:100%;
  height:100%;
  padding:0;
}

#app-view.is-landing-home .content-stage,
#app-view.is-landing-home .content-center,
#app-view.is-landing-home .content-media-shell,
#app-view.is-landing-home .content-media-grid,
#app-view.is-landing-home .media-card,
#app-view.is-landing-home .media-frame{
  height:100%;
  min-height:0;
}

#app-view.is-landing-home .content-media-shell{
  margin-top:0;
  position:relative;
}

#app-view.is-landing-home .content-media-grid{
  margin-top:0;
  position:relative;
}

#app-view.is-landing-home .content-project-bar{
  opacity:0;
  pointer-events:none;
}

#app-view.is-static-page .content-shell{
  grid-template-rows:minmax(0,1fr);
  height:100%;
  min-height:0;
  padding:1.25rem 2rem 0 0;
  overflow:hidden;
}

#app-view.is-static-page .content-media-shell,
#app-view.is-static-page .content-project-bar{
  display:none;
}

#app-view.is-static-page .content-stage{
  min-height:0;
  height:100%;
  overflow:auto;
  place-items:start center;
  padding-bottom:2rem;
}

#app-view.is-static-page .content-center{
  max-width:42rem;
  width:100%;
}

#app-view.is-static-page .content-header{
  max-width:42rem;
  padding-top:0;
}

body.intro-active #layout{
  inset:0;
  height:100vh;
}

body.intro-active #main{
  margin-top:0;
  height:100%;
  padding-left:0;
}

@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}

@media (max-width:900px){
  html,body{
    cursor:auto;
  }

  #desktop-gallery-toggle,
  .desktop-gallery-overlay{
    display:none;
  }

  #layout{
    inset:0;
    height:100vh;
  }

  a,button{
    cursor:pointer;
  }

  #cursor-ring,
  #cursor-dot,
  #cursor-label{
    display:none;
  }

  #top-bar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:auto;
    min-height:56px;
    align-items:center;
    justify-content:flex-start;
    flex-wrap:wrap;
    padding:0 1rem;
    padding-bottom:0;
    background:transparent;
    transition:top .8s cubic-bezier(.42,0,.58,1), opacity 3s ease, transform .42s cubic-bezier(.22,1,.36,1), width .42s cubic-bezier(.22,1,.36,1);
  }

  #main{
    padding-left:0;
    transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .5s,margin-top .8s cubic-bezier(.42,0,.58,1),height .8s cubic-bezier(.42,0,.58,1),padding-left .3s ease;
  }

  .top-bar-section{
    display:none;
  }

  .top-bar-section:nth-child(3){
    display:flex;
    flex:0 1 auto;
    justify-content:flex-start;
    position:relative;
    flex:0 0 100%;
    min-height:56px;
  }

  #sig-wrap{
    position:absolute;
    left:-.60rem;
    top:50%;
    width:154px;
    height:52px;
    transform:translateY(-50%);
    transition:left .9s cubic-bezier(.42,0,.58,1), transform .9s cubic-bezier(.42,0,.58,1), opacity .42s ease;
  }

  #mobile-menu-toggle{
    position:absolute;
    top:0;
    right:1rem;
    width:auto;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:none;
    border:none;
    padding:0;
    z-index:205;
    font-family:'DM Sans',sans-serif;
    font-size:.72rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(122,92,58,.88);
    transition:color .3s ease, opacity .34s ease, transform .55s cubic-bezier(.42,0,.58,1);
  }

  #mobile-menu{
    position:relative;
    flex:0 0 100%;
    display:block;
    max-height:0;
    overflow:hidden;
    opacity:1;
    pointer-events:none;
    transform:translateY(-.8rem);
    transition:max-height .75s cubic-bezier(.42,0,.58,1), transform .75s cubic-bezier(.42,0,.58,1), opacity .35s ease;
    z-index:204;
  }

  #mobile-menu.open{
    pointer-events:auto;
    max-height:var(--mobile-menu-height);
    transform:translateY(0);
  }

  #mobile-menu.is-level-switching{
    transition:none;
  }

  #mobile-menu.closing{
    pointer-events:none;
  }

  .mobile-menu-shell{
    margin-top:0;
    padding:.3rem 1rem .1rem;
    background:transparent;
    border-top:none;
  }

  .mobile-menu-shell.is-root{
    padding-top:.3rem;
  }

  .mobile-menu-header{
    display:none;
  }

  #mobile-menu-title{
    order:1;
    font-family:'DM Sans',sans-serif;
    font-size:.65rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:rgba(122,92,58,.66);
  }

  #mobile-menu-back{
    order:2;
    margin-left:auto;
    background:none;
    border:none;
    padding:0;
    font-family:'DM Sans',sans-serif;
    font-size:.65rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--earth);
  }

  #mobile-menu-back[hidden]{
    visibility:hidden;
    display:block;
  }

  .mobile-menu-list{
    display:grid;
    gap:0;
    padding:0 .65rem 0 1rem;
  }

  .mobile-menu-shell.is-root .mobile-menu-list{
    padding-top:0;
  }

  .mobile-menu-list > *{
    opacity:0;
    transform:translateY(-.85rem);
    transition:transform .62s cubic-bezier(.42,0,.58,1), opacity .48s ease;
    transition-delay:var(--mobile-item-delay, 0ms);
  }

  #mobile-menu.open .mobile-menu-list > *{
    opacity:1;
    transform:translateY(0);
  }

  #mobile-menu.closing .mobile-menu-list > *{
    opacity:0;
    transform:translateY(-.85rem);
    transition-delay:0ms;
  }

  .mobile-menu-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:none;
    border:none;
    padding:.16rem 0;
    text-align:left;
    font-family:'DM Sans',sans-serif;
    font-size:.9rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:rgba(122,92,58,.95);
  }

  .mobile-menu-link-close{
    display:block;
    width:auto;
    margin-left:auto;
    justify-self:end;
    font-size:.74rem;
    letter-spacing:.14em;
    color:rgba(122,92,58,.56);
    text-align:right;
    margin-top:.95rem;
    margin-bottom:.12rem;
    padding-right:.05rem;
  }

  .mobile-menu-link.has-children::after{
    content:'›';
    font-size:.95rem;
    line-height:1;
    color:rgba(122,92,58,.42);
  }

  .mobile-project-overlay{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display:flex;
    flex-direction:column;
    background-color:rgba(122,92,58,.56);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    color:var(--paper);
    overflow:hidden;
    z-index:260;
    opacity:1;
    transform:translateY(100%);
    visibility:hidden;
    pointer-events:none;
    transition:transform .72s cubic-bezier(.65,.02,.9,.35), visibility 0s linear .72s;
  }

  .mobile-project-overlay.open{
    transform:translateY(0);
    visibility:visible;
    pointer-events:auto;
    transition:transform .84s cubic-bezier(.12,.92,.18,1), visibility 0s linear 0s;
  }

  .mobile-project-overlay-header{
    position:absolute;
    top:0;
    right:0;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding:1rem 1rem 0;
    z-index:1;
  }

  #mobile-project-overlay-close{
    background:none;
    border:none;
    padding:0;
    font-family:'DM Sans',sans-serif;
    font-size:.68rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--paper);
  }

  .mobile-project-overlay-list{
    display:grid;
    gap:0;
    padding:3.4rem 1rem 1rem;
    overflow:auto;
    min-height:0;
    justify-items:center;
  }

  .mobile-project-overlay-link,
  .mobile-project-overlay-meta{
    display:block;
    width:auto;
    text-align:center;
    background:none;
    border:none;
    padding:.22rem 0;
    color:rgba(253,252,248,.76);
    font-family:'DM Sans',sans-serif;
    font-weight:300;
    font-size:.77rem;
    letter-spacing:.04em;
    opacity:1;
    transform:none;
    transition:none;
  }

  .mobile-project-overlay-meta{
    color:var(--paper);
  }

  body.mobile-menu-open #top-bar{
    top:calc(50vh - 11rem);
  }

  body.mobile-menu-open .mobile-project-overlay{
    top:0;
  }

  body.mobile-menu-open #sig-wrap{
    left:50%;
    transform:translate(-50%,-50%) scale(1.01);
  }

  body.mobile-menu-open #mobile-menu-toggle{
    opacity:0;
    pointer-events:none;
    transform:translateY(-.35rem);
  }

  body.mobile-menu-open #main{
    margin-top:calc(50vh - 4.5rem);
    height:calc(50vh + 4.5rem);
  }

  #landing-progress{
    width:min(8.5rem, calc(100vw - 13rem));
    height:1rem;
    bottom:1.18rem;
  }

  .video-progress{
    width:min(100%, 8.5rem);
    height:1rem;
  }

  #works-panel,
  #contact-panel{
    display:none;
  }

  #works-panel.has-projects{
    width:min(100vw - (var(--frame) * 2), var(--sidebar-expanded));
  }

  .content-shell{
    padding:1rem 1rem 0;
  }

  .works-panel-inner{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
  }

  .project-nav-col{
    grid-column:1;
    grid-row:2;
    border-left:none;
    border-top:.5px solid rgba(253,252,248,.14);
    padding:1rem 0 0;
    margin-top:1rem;
  }

  .works-contact{
    grid-column:1;
    grid-row:3;
    padding-right:0;
    margin-top:1rem;
  }

  .contact-panel-inner{
    padding:1rem;
  }

  .content-media-grid{
    grid-template-columns:1fr;
  }

  .content-project-bar{
    grid-template-columns:1fr;
    gap:.2rem;
  }

  .content-project-role,
  .content-project-label,
  .content-project-location{
    text-align:center;
  }

  .slideshow-controls{
    padding-left:1rem;
    padding-right:1rem;
  }

  .media-frame{
    min-height:calc(100vh - 140px);
  }

  .media-frame img,
  .media-frame video{
    height:calc(100vh - 140px);
  }

  #app-view.has-media .media-frame img,
  #app-view.has-media .media-frame video{
    height:calc(100vh - 72px);
  }
}