:root{
  --bg:#ffffff;
  --text:#171717;
  --muted:#737373;
  --quiet:#a3a3a3;
  --line:rgba(23,23,23,.16);
  --line-strong:rgba(23,23,23,.9);
  --panel:rgba(255,255,255,.76);
  --panel-soft:rgba(255,255,255,.58);
  --font:Helvetica, Arial, "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --mono:Helvetica, Arial, "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --nav-font:"Segoe UI Variable Text", "Segoe UI", Arial, "Microsoft YaHei", sans-serif;
  --nav-w:324px;
  --side-pad:32px;
  --nav-first-line-top:123px;
  --projects-top:var(--nav-first-line-top);
  --projects-left-zone-w:4%;
  --projects-preview-col-w:25%;
  --projects-gap-col-w:4%;
  --projects-list-col-w:62%;
  --projects-right-zone-w:5%;
  --detail-left-zone-w:18%;
  --detail-media-col-w:42%;
  --detail-gap-col-w:7%;
  --detail-info-col-w:23%;
  --detail-right-zone-w:10%;
  --detail-info-top-offset:36px;
  --contact-content-w:1480px;
  --studio-left-zone-w:40%;
  --studio-scroll-w:46%;
  --studio-right-blank-w:14%;
  --studio-subnav-w:60px;
  --studio-subnav-half-w:30px;
  --studio-footer-left-extension:20%;
  --gallery-left-zone-w:10%;
  --gallery-grid-w:80%;
  --gallery-right-zone-w:10%;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{ box-sizing:border-box; }
html{
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
body{
  margin:0;
  font-family:var(--font);
  font-size:13.5px;
  font-weight:450;
  line-height:1.5;
  letter-spacing:0;
  overflow-x:hidden;
}
html[data-lang="zh"] body{ letter-spacing:0; }
a,button{
  font:inherit;
  color:inherit;
  text-decoration:none;
  background:transparent;
  border:0;
  padding:0;
  margin:0;
  cursor:pointer;
  text-align:left;
}
img,video{ max-width:100%; display:block; }

.edge-reveal{
  position:fixed;
  inset:0 auto 0 0;
  width:72px;
  z-index:35;
  pointer-events:auto;
}
body.is-home .edge-reveal{
  width:var(--nav-w);
}

.sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:var(--nav-w);
  padding:26px var(--side-pad) 28px;
  z-index:40;
  display:flex;
  flex-direction:column;
  color:var(--text);
  background:transparent;
  pointer-events:none;
  transition:
    background .34s var(--ease),
    transform .86s var(--ease) .06s,
    opacity .86s ease .06s;
}
.sidebar a,.sidebar button{ pointer-events:auto; }
body.is-home .sidebar{
  background:var(--panel-soft);
  backdrop-filter:blur(22px) saturate(160%);
  opacity:0;
  transform:translateX(-24px);
}
body.is-home.nav-open .sidebar,
body.is-home .sidebar:hover{
  opacity:1;
  transform:translateX(0);
  transition:
    background .34s var(--ease),
    transform .34s var(--ease),
    opacity .28s ease;
}
.mark{
  display:block;
  width:134.4px;
  margin-bottom:55px;
  line-height:0;
}
.mark img{
  width:100%;
  height:auto;
  display:block;
}
.side-nav{
  display:flex;
  flex-direction:column;
  gap:10px;
  font-family:var(--nav-font);
  font-size:13.5px;
  line-height:1;
  font-weight:560;
}
.side-nav a,.side-nav button,.language-switch button{
  width:max-content;
  color:var(--muted);
  font-family:var(--nav-font);
  font-size:13.5px;
  line-height:1;
  font-weight:560;
  transition:color .18s ease, transform .22s var(--ease), font-weight .18s ease;
}
.side-nav a:hover,.side-nav button:hover,.language-switch button:hover,
.side-nav .active,.language-switch .active{
  color:var(--text);
  font-weight:700;
}
.side-nav a:hover,.side-nav button:hover{ transform:translateX(4px); }
.language-switch{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:36px 0 34px;
  font-size:13.5px;
  font-family:var(--nav-font);
  line-height:1;
  font-weight:560;
}
.filters{ transition:opacity .18s ease; }
.filters.is-hidden{ opacity:0; pointer-events:none; }

.main-area{
  min-height:100vh;
  padding:102px 44px 90px calc(var(--nav-w) + 150px);
}
body.is-projects .main-area{
  padding:var(--projects-top) 0 64px var(--nav-w);
}
body.is-contact .main-area{
  padding-left:var(--nav-w);
  padding-right:80px;
}
body.is-studio .main-area{
  padding-top:var(--nav-first-line-top);
  padding-left:var(--nav-w);
}
body.is-gallery .main-area{
  padding-left:var(--nav-w);
  padding-right:0;
}
.page{ display:none; animation:pageIn .44s var(--ease) both; }
.page.active{ display:block; }
body.is-projects .page.active{ animation:none; }
@keyframes pageIn{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

.home-page{
  position:fixed;
  inset:0;
  z-index:1;
  overflow:hidden;
  background:#000;
}
.home-page.active{ display:block; }
.home-scrim{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.home-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center;
  background:#25352a url("./assets/media/home-poster.jpg") center/cover no-repeat;
}
.home-scrim{
  background:
    radial-gradient(circle at 50% 42%, rgba(0,0,0,.10), rgba(0,0,0,0) 36%),
    linear-gradient(90deg, rgba(0,0,0,.34), rgba(0,0,0,.06) 44%, rgba(0,0,0,.22));
}
.home-copy{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  color:#fff;
  z-index:2;
  animation:homeFloat 1.2s .18s var(--ease) both;
  pointer-events:none;
}
.sound-toggle{
  position:absolute;
  right:clamp(22px, 3.2vw, 54px);
  bottom:clamp(22px, 3.2vw, 54px);
  z-index:3;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:rgba(0,0,0,.24);
  backdrop-filter:blur(16px) saturate(140%);
  transition:background .22s ease, border-color .22s ease, transform .22s var(--ease), opacity .22s ease;
}
.sound-toggle:hover{
  background:rgba(0,0,0,.38);
  border-color:rgba(255,255,255,.68);
  transform:translateY(-1px);
}
.sound-toggle svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.sound-speaker{ fill:currentColor; stroke:none; }
.sound-wave,.sound-slash{ transition:opacity .18s ease; }
.sound-toggle .sound-slash{ opacity:0; }
.sound-toggle.is-muted .sound-wave{ opacity:.25; }
.sound-toggle.is-muted .sound-slash{ opacity:1; }
@keyframes homeFloat{
  from{ opacity:0; transform:translateY(18px); filter:blur(8px); }
  to{ opacity:1; transform:translateY(0); filter:blur(0); }
}
.home-statement{
  position:absolute;
  left:50%;
  top:69vh;
  width:min(74vw, 1320px);
  transform:translate(-50%, -50%);
  margin:0;
  font-family:"Helvetica Neue", "Avenir Next", var(--nav-font);
  font-size:clamp(15px, .95vw, 19px);
  line-height:1.68;
  font-weight:300;
  letter-spacing:.03em;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(16px, 1.75vw, 30px);
  text-align:center;
  color:rgba(255,255,255,.94);
  text-shadow:0 2px 22px rgba(0,0,0,.2);
}
.home-statement span{
  display:block;
  white-space:nowrap;
}
.home-statement span:first-child{
  font-size:1em;
  font-weight:300;
  opacity:.86;
}
.home-statement span:last-child{
  font-size:clamp(20px, 1.32vw, 25px);
  font-weight:380;
  letter-spacing:.04em;
  opacity:1;
}
.home-center-logo{
  position:fixed;
  left:50vw;
  top:50dvh;
  width:15vw;
  height:auto;
  transform:translate(-50%, -50%);
  opacity:.9;
}

.page-heading{
  display:grid;
  grid-template-columns:minmax(160px, .33fr) minmax(320px, 1fr);
  gap:48px;
  margin-bottom:84px;
}
.page-heading h1,.project-section h2,.contact-title{
  margin:0;
  font-size:13px;
  line-height:1;
  font-weight:600;
}
.page-heading p{
  max-width:620px;
  margin:0;
  color:var(--muted);
  font-size:18px;
  line-height:1.55;
  font-weight:300;
}

.gallery-page.active{
  display:grid;
  grid-template-columns:var(--gallery-left-zone-w) var(--gallery-grid-w) var(--gallery-right-zone-w);
  align-items:start;
}
.gallery-page .page-heading{ display:none; }

.projects-page.active{
  display:grid;
  grid-template-columns:var(--projects-left-zone-w) var(--projects-preview-col-w) var(--projects-gap-col-w) var(--projects-list-col-w) var(--projects-right-zone-w);
  align-items:start;
  width:100%;
  max-width:none;
}
.project-preview-column{
  grid-column:2;
  width:100%;
  min-height:1px;
}
.project-lists{
  grid-column:4;
  width:100%;
  min-width:0;
}
.project-section{
  position:relative;
  z-index:20;
  width:100%;
  max-width:none;
  overflow:hidden;
}
.project-section h2{
  height:56px;
  margin:0;
  display:flex;
  align-items:center;
  border-bottom:.75px solid var(--line-strong);
  font-size:15px;
  line-height:1;
  font-weight:700;
}
.archive-section{
  margin-top:78px;
}
.project-table{ border-top:0; }
.project-row{
  position:relative;
  display:grid;
  grid-template-columns:70px minmax(0,1fr) minmax(110px, 170px);
  align-items:center;
  min-height:45px;
  border-bottom:.75px solid var(--line-strong);
  overflow:visible;
  color:var(--text);
  font-family:var(--nav-font);
  font-size:13.5px;
  font-weight:600;
  transition:color .34s ease;
}
.project-row::before{
  content:"";
  position:absolute;
  inset:0;
  background:#000;
  opacity:0;
  transition:opacity .42s ease;
}
.project-row > span{
  position:relative;
  z-index:1;
  -webkit-text-stroke:.2px currentColor;
  transition:transform .82s var(--ease), opacity .46s ease;
}
.project-row:hover,.project-row.active-row{ color:#fff; }
.project-row:hover::before,.project-row.active-row::before{ opacity:1; }
.project-row:hover .year,
.project-row.active-row .year,
.project-row:hover .title,
.project-row.active-row .title{ transform:translateX(36px); }
.project-row.hidden{ display:none; }
.project-row .arrow{
  position:absolute;
  left:0;
  top:50%;
  width:13px;
  height:8px;
  opacity:0;
  transform:translateY(-50%);
  transition:opacity .52s ease;
  pointer-events:none;
}
.project-row .arrow::before{
  content:"";
  position:absolute;
  left:1px;
  top:50%;
  width:11px;
  height:2px;
  background:currentColor;
  transform:translateY(-50%);
}
.project-row .arrow::after{
  content:"";
  position:absolute;
  z-index:1;
  right:0;
  top:50%;
  width:5px;
  height:5px;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
}
.project-row:hover .arrow,.project-row.active-row .arrow{ opacity:1; }
.project-row .year{
  font-family:var(--nav-font);
  font-size:13.5px;
  line-height:1.32;
  font-weight:600;
  color:currentColor;
}
.project-row .title{
  font-size:13.5px;
  line-height:1.32;
  font-weight:600;
  letter-spacing:0;
  white-space:nowrap;
  overflow:hidden;
  padding-block:3px;
  margin-block:-3px;
  text-overflow:ellipsis;
  min-width:0;
}
html[data-lang="zh"] .project-row .title{ letter-spacing:-.02em; }
html[data-lang="zh"] .project-row .title,
html[data-lang="zh"] .project-row .type{
  -webkit-text-stroke:0;
}
.project-row .type{
  justify-self:end;
  color:currentColor;
  font-size:13.5px;
  line-height:1.32;
  font-weight:600;
}

.hover-image{
  position:fixed;
  left:var(--nav-w);
  top:var(--projects-top);
  width:24vw;
  aspect-ratio:16/9;
  z-index:10;
  opacity:0;
  transform:translate3d(0, 8px, 0);
  transition:
    top .45s cubic-bezier(.2,.76,.18,1),
    left .45s cubic-bezier(.2,.76,.18,1),
    width .45s cubic-bezier(.2,.76,.18,1),
    opacity .22s ease,
    transform .45s cubic-bezier(.2,.76,.18,1);
  pointer-events:none;
  overflow:hidden;
  will-change:top, left, width, transform, opacity;
}
.hover-image.visible{
  opacity:1;
  transform:translate3d(0,0,0);
}
.hover-image .preview-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  opacity:0;
  transition:opacity .35s ease;
}
.hover-image .preview-layer.active{ opacity:1; }

body.is-project-detail .main-area{
  padding:var(--nav-first-line-top) 0 96px var(--nav-w);
}
.detail-topline{
  position:fixed;
  left:calc(var(--nav-w) + 72px);
  top:28px;
  z-index:30;
  display:flex;
  gap:18px;
  font-family:var(--nav-font);
  font-size:13px;
  line-height:1;
  font-weight:700;
  color:var(--quiet);
  opacity:0;
  pointer-events:none;
}
.detail-topline a:hover{ color:var(--text); }
.project-detail-layout{
  position:relative;
  display:grid;
  grid-template-columns:var(--detail-left-zone-w) var(--detail-media-col-w) var(--detail-gap-col-w) var(--detail-info-col-w) var(--detail-right-zone-w);
  align-items:start;
  width:100%;
  max-width:none;
}
.project-media-column{
  grid-column:2;
}
.project-media-column{
  min-width:0;
  padding-bottom:82px;
}
.project-hero{
  margin:0;
  background:#f1f1ef;
}
.project-hero img,.project-image-stack img{
  width:100%;
  height:auto;
  object-fit:cover;
  background:#f1f1ef;
}
.project-image-landscape img,
.project-image-stack .project-image-landscape{
  aspect-ratio:16/9;
}
.project-hero--natural img{
  aspect-ratio:auto;
  object-fit:contain;
}
.project-image-stack .project-image-portrait{
  width:min(58%, 540px);
  aspect-ratio:16/9;
  justify-self:start;
}
.project-image-pair{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  align-items:start;
  gap:12px;
}
.project-image-pair img{
  aspect-ratio:auto;
}
.project-image-pair--uniform img{
  aspect-ratio:2/3;
  object-fit:cover;
}
.project-image-stack .project-image-portrait-natural{
  width:min(62%, 600px);
  height:auto;
  object-fit:contain;
  justify-self:center;
}
.project-under{
  display:grid;
  grid-template-columns:minmax(190px, .43fr) minmax(300px, 1fr);
  gap:42px;
  margin-top:22px;
  font-family:var(--nav-font);
}
.project-under h1{
  margin:0;
  font-family:var(--nav-font);
  font-size:14.5px;
  line-height:1.24;
  font-weight:760;
  letter-spacing:0;
}
.project-subtitle-line{
  margin:0 0 20px;
  font-family:var(--nav-font);
  font-size:14.5px;
  line-height:1.24;
  font-weight:760;
}
.project-short-copy p,.project-long-copy p{
  margin:0 0 27px;
  color:var(--text);
  font-family:var(--nav-font);
  font-size:13.5px;
  line-height:1.5;
  font-weight:520;
}
.project-short-copy p{
  max-width:560px;
}
.project-image-stack{
  display:grid;
  gap:92px;
  margin-top:118px;
}
.project-fixed-info{
  grid-column:4;
  position:sticky;
  top:calc(var(--nav-first-line-top) + var(--detail-info-top-offset));
  align-self:start;
  width:100%;
  max-width:none;
  margin-top:var(--detail-info-top-offset);
  font-family:var(--nav-font);
  font-size:13px;
}
.project-facts{
  display:grid;
  gap:9px;
  margin-bottom:52px;
  padding-top:0;
  border-top:0;
}
.project-facts div{
  display:grid;
  grid-template-columns:88px 1fr;
  gap:18px;
  padding:0;
  border-bottom:0;
  color:var(--text);
  font-family:var(--nav-font);
  font-size:13.5px;
  line-height:1.16;
  font-weight:620;
  -webkit-text-stroke:.2px currentColor;
}
.project-facts span:first-child{ color:var(--text); }
.project-long-copy{
  max-width:none;
}
.project-long-copy p{
  font-size:13.5px;
}

.gallery-grid-stage{
  position:relative;
  grid-column:2;
  width:100%;
  max-width:none;
  margin-top:58px;
  cursor:crosshair;
}
.gallery-grid{
  display:flex;
  flex-direction:column;
  row-gap:72.5px;
}
.gallery-row{ display:flex; width:100%; align-items:flex-start; }
.gallery-card,.gallery-spacer{
  flex:0 0 12.5%;
  min-width:0;
  padding:0 2.5px;
}
.gallery-card{ position:relative; z-index:1; }
.gallery-card a,.gallery-thumb,.gallery-spacer{
  display:block;
  width:100%;
  aspect-ratio:16/9;
}
.gallery-thumb{ overflow:hidden; background:#f1f1ef; }
.gallery-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:filter .24s ease, transform .36s var(--ease);
}
.gallery-card:hover img{ filter:grayscale(1) contrast(1.05); }
.gallery-spacer{ visibility:hidden; pointer-events:none; }
.gallery-hover-title{
  position:absolute;
  z-index:50;
  font-family:var(--mono);
  font-size:13px;
  font-weight:650;
  line-height:1;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transition:opacity .36s ease;
}
.gallery-hover-title.visible{ opacity:1; }

.studio-layout{
  display:grid;
  grid-template-columns:var(--studio-left-zone-w) var(--studio-scroll-w) var(--studio-right-blank-w);
  width:100%;
  align-items:start;
}
.studio-content{
  grid-column:2;
  min-width:0;
}
.studio-subnav{
  grid-column:1;
  justify-self:center;
  width:var(--studio-subnav-w);
  position:sticky;
  top:var(--nav-first-line-top);
  display:flex;
  flex-direction:column;
  gap:10px;
  font-family:var(--nav-font);
  font-size:13.5px;
  line-height:1;
  font-weight:560;
}
.studio-subnav button{
  width:max-content;
  color:var(--muted);
  font-family:var(--nav-font);
  font-size:13.5px;
  line-height:1;
  font-weight:560;
  transition:color .18s ease;
}
.studio-subnav button.active,.studio-subnav button:hover{
  color:var(--text);
}
.studio-section{
  min-height:46vh;
  padding-bottom:80px;
  scroll-margin-top:var(--nav-first-line-top);
}
.studio-section h2{
  margin:0 0 30px;
  font-family:var(--nav-font);
  font-size:28px;
  line-height:1;
  font-weight:700;
  letter-spacing:0;
  -webkit-text-stroke:.2px currentColor;
}
.studio-section p{
  margin:0;
  color:var(--text);
  font-family:var(--nav-font);
  font-size:14px;
  line-height:1.5;
  font-weight:520;
}

.contact-page.active{
  min-height:calc(100vh - 170px);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding-top:24px;
}
.contact-title{
  width:100%;
  display:grid;
  grid-template-columns:minmax(420px, 1fr) minmax(220px, .72fr) minmax(220px, .78fr) minmax(180px, .62fr);
  gap:72px;
  margin:0 0 48px 0;
  font-family:var(--nav-font);
}
.contact-title::after{
  display:none;
}
.contact-slogan{
  display:block;
  grid-column:1;
  justify-self:center;
  width:420px;
  max-width:100%;
  font-size:26px;
  line-height:1.26;
  font-weight:760;
  text-transform:uppercase;
}
html[data-lang="zh"] .contact-slogan{ line-height:1.34; }
.contact-label{
  display:block;
  justify-self:end;
  font-size:14px;
  line-height:1;
  font-weight:700;
  text-transform:uppercase;
}
.contact-section-heading{
  grid-column:2 / -1;
  grid-row:1;
  align-self:start;
  display:grid;
  width:100%;
}
.contact-section-heading::after{
  content:"";
  width:100%;
  margin-top:21px;
  border-top:1px solid var(--line-strong);
}
.contact-three-col{
  width:100%;
  display:grid;
  grid-template-columns:minmax(420px, 1fr) minmax(220px, .72fr) minmax(220px, .78fr) minmax(180px, .62fr);
  gap:72px;
  font-family:var(--nav-font);
}
.contact-three-col .contact-form{
  grid-column:1;
  grid-row:1 / span 2;
  justify-self:center;
}
.contact-address-col{
  grid-column:2;
  grid-row:2;
}
.contact-page .footer-email-col{
  grid-column:3;
  grid-row:2;
}
.contact-follow-col{
  grid-column:4;
  grid-row:2;
}
.contact-copyright{
  grid-column:1 / -1;
  justify-self:end;
  margin-top:70px;
  color:var(--text);
  font-family:var(--nav-font);
  font-size:12px;
  line-height:1;
  font-weight:700;
  text-transform:uppercase;
}
.contact-col h3{
  margin:0 0 8px;
  font-family:var(--nav-font);
  font-size:14px;
  line-height:1;
  font-weight:700;
  text-transform:uppercase;
}
.contact-col p,
.contact-social-item span{
  margin:0;
  color:#333;
  font-family:var(--nav-font);
  font-size:13.5px;
  line-height:1.5;
  font-weight:520;
}
.contact-col a:hover{ color:var(--muted); }
.contact-page .footer-email-col{
  margin-left:24px;
}
.contact-form{
  display:flex;
  flex-direction:column;
  gap:28px;
  width:420px;
  max-width:100%;
  font-family:var(--nav-font);
}
.contact-form label{
  display:block;
  margin:0;
}
.contact-form span{
  display:block;
  margin:0 0 15px;
  font-size:13.5px;
  line-height:1;
  font-weight:700;
  text-transform:uppercase;
}
.contact-form input,
.contact-form textarea{
  display:block;
  width:100%;
  border:0;
  border-bottom:1px solid var(--line-strong);
  border-radius:0;
  padding:0 0 12px;
  background:transparent;
  color:var(--text);
  font-family:var(--nav-font);
  font-size:13.5px;
  line-height:1.5;
  font-weight:520;
  outline:none;
}
.contact-form textarea{
  min-height:116px;
  resize:vertical;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color:#9a9a9a;
}
.contact-form button{
  width:180px;
  height:44px;
  margin-top:6px;
  border:1px solid var(--line-strong);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--nav-font);
  font-size:13.5px;
  line-height:1;
  font-weight:700;
  text-transform:uppercase;
  transition:background .22s ease, color .22s ease;
}
.contact-form button:hover{
  background:var(--text);
  color:var(--bg);
}
.contact-page .contact-address-col > p,
.contact-page .contact-follow-col .contact-social-item:first-of-type{
  margin-top:24px;
}
.contact-page .footer-email-list{ margin-top:24px; }
.contact-page .footer-email-group{ margin-bottom:34px; }
.contact-page .footer-email-group h3{
  margin:0 0 4px;
  color:#858585;
  font-size:13.5px;
  line-height:1;
  font-weight:660;
}
.contact-page .footer-email-group p{ margin:0; }
.contact-map{
  width:100%;
  max-width:220px;
  height:142px;
  margin-top:48px;
  background:#e6e6e2;
  overflow:hidden;
}
.contact-map iframe{ width:100%; height:100%; border:0; filter:grayscale(1); }
.contact-social-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  max-width:210px;
  padding-bottom:0;
  margin-bottom:28px;
  border-bottom:0;
}
.contact-qr{ width:64px; height:64px; flex:0 0 64px; background:linear-gradient(135deg,#222 25%,#f4f4f4 25% 50%,#222 50% 75%,#f4f4f4 75%); background-size:14px 14px; }

.projects-page .site-footer{
  font-family:var(--nav-font);
  grid-column:2 / 5;
  width:100%;
  max-width:none;
  margin-top:clamp(225px, 22vw, 360px);
}

.site-footer{
  font-family:var(--nav-font);
  max-width:1180px;
  margin-top:160px;
  padding-top:22px;
  border-top:1px solid var(--line-strong);
}
.studio-page .site-footer{
  width:calc(var(--studio-scroll-w) + var(--studio-footer-left-extension) + var(--studio-subnav-half-w));
  max-width:none;
  margin-left:auto;
  margin-right:var(--studio-right-blank-w);
}
.gallery-page .site-footer{
  grid-column:2;
  width:100%;
  max-width:none;
}
.project-detail .site-footer{
  width:auto;
  max-width:none;
  margin-left:var(--detail-left-zone-w);
  margin-right:var(--detail-right-zone-w);
}
.site-footer h2{
  margin:0 0 34px;
  font-size:13.5px;
  text-transform:uppercase;
}
.footer-contact-grid{
  display:grid;
  grid-template-columns:1.2fr .9fr .8fr;
  gap:72px;
}
.footer-contact-grid h3{
  margin:0 0 8px;
  font-family:var(--nav-font);
  font-size:13.5px;
  font-weight:700;
  text-transform:uppercase;
}
.footer-contact-grid p{ margin:0 0 24px; color:#333; font-family:var(--nav-font); font-weight:520; }
.footer-email-list{ margin-top:24px; }
.footer-email-group{ margin-bottom:24px; }
.footer-email-group h3{ margin-bottom:2px; color:#6f6f6f; font-weight:660; }
.footer-email-group p{ margin-bottom:0; }
.footer-copyright{
  margin-top:88px;
  padding-bottom:28px;
  color:var(--text);
  text-align:right;
  font-family:var(--nav-font);
  font-size:12px;
  line-height:1;
  font-weight:700;
  text-transform:uppercase;
}
.counter{
  position:fixed;
  right:34px;
  bottom:24px;
  z-index:45;
  font-family:var(--mono);
  font-size:12px;
  color:var(--muted);
}
body.is-home .counter{ color:#fff; }

@media(max-width:1100px){
  :root{ --nav-w:230px; --side-pad:24px; }
  .main-area{ padding-left:calc(var(--nav-w) + 54px); padding-right:28px; }
  body.is-studio .main-area{ padding-left:calc(var(--nav-w) + 54px); }
  body.is-gallery .main-area{ padding-left:calc(var(--nav-w) + 54px); padding-right:28px; }
  body.is-contact .main-area{ padding-right:28px; }
  body.is-project-detail .main-area{ padding:102px 28px 90px calc(var(--nav-w) + 54px); }
  .page-heading,.project-under,.project-detail-layout,.studio-layout,.contact-title,.contact-three-col{ grid-template-columns:1fr; gap:34px; }
  .studio-layout{ justify-content:stretch; padding-right:0; }
  .studio-subnav,.studio-content{ grid-column:auto; }
  .gallery-page.active{ grid-template-columns:1fr; }
  .gallery-grid-stage,.gallery-page .site-footer{ grid-column:auto; }
  .contact-slogan{ justify-self:start; }
  .contact-three-col .contact-form,
  .contact-section-heading,
  .contact-address-col,
  .contact-page .footer-email-col,
  .contact-follow-col,
  .contact-copyright{
    grid-column:auto;
    grid-row:auto;
  }
  .contact-section-heading{ margin-top:68px; }
  .contact-page .footer-email-col{ margin-left:0; }
  .detail-topline{ display:none; }
  .project-fixed-info{ position:static; max-width:none; }
  .project-long-copy{ max-width:720px; }
  .hover-image{ display:none; }
  body.is-projects .main-area{ padding:102px 28px 90px calc(var(--nav-w) + 54px); }
  .projects-page.active{ display:block; width:100%; }
  .project-preview-column{ display:none; }
  .archive-section{ margin-top:64px; }
  .studio-page .site-footer{ width:100%; margin-right:0; }
  .projects-page .site-footer{ grid-column:auto; }
  .project-detail .site-footer{ width:100%; margin-left:0; margin-right:0; }
}

@media(max-width:760px){
  .edge-reveal{ display:none; }
  .sidebar,body.is-home .sidebar{
    position:relative;
    width:auto;
    opacity:1;
    transform:none;
    background:#fff;
    backdrop-filter:none;
  }
  .mark{ margin-bottom:34px; }
  .primary-nav,.language-switch,.filters{
    flex-direction:row;
    flex-wrap:wrap;
    gap:14px 18px;
  }
  .language-switch{ margin:24px 0; }
  .main-area{ padding:46px 22px 86px; }
  body.is-studio .main-area{ padding:46px 22px 86px; }
  body.is-gallery .main-area{ padding:46px 22px 86px; }
  body.is-contact .main-area{ padding:46px 22px 86px; }
  body.is-projects .main-area,body.is-project-detail .main-area{ padding:46px 22px 86px; }
  .projects-page.active{ display:block; width:100%; }
  body.is-home .sidebar{ position:fixed; inset:0 0 auto 0; background:rgba(255,255,255,.78); }
  .home-statement{
    top:69vh;
    width:min(86vw, 640px);
    font-size:clamp(13px, 3.1vw, 16px);
    line-height:1.62;
    letter-spacing:.02em;
    gap:16px;
  }
  .home-statement span{ white-space:normal; }
  .home-statement span:last-child{ font-size:clamp(18px, 5vw, 22px); }
  .home-center-logo{ left:50vw; top:50dvh; width:48.6vw; }
  .archive-section{ margin-top:52px; }
  .project-row{ grid-template-columns:60px minmax(0,1fr); }
  .project-row .arrow{ display:none; }
  .project-row .title{ font-size:13.5px; }
  .studio-section p{ font-size:14px; line-height:1.5; font-weight:520; }
  .project-row .type{ display:none; }
  .project-under{ grid-template-columns:1fr; gap:18px; }
  .project-fixed-info{ margin-top:20px; }
  .project-facts div{ grid-template-columns:82px 1fr; }
  .project-image-stack{ gap:54px; margin-top:72px; }
  .project-image-stack .project-image-portrait{ width:72%; }
  .project-image-stack .project-image-portrait-natural{ width:82%; }
  .gallery-card,.gallery-spacer{ flex-basis:50%; }
  .footer-contact-grid{ grid-template-columns:1fr; gap:24px; }
  .footer-copyright{ text-align:left; }
}