*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#fff;color:#111}
body{font-family:Arial,Helvetica,sans-serif;padding:25px}
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:1px}
a:hover{text-decoration:none}

.frame{
  width:100%;
  max-width:1400px;
  min-height:calc(100vh - 50px);
  margin:0 auto;
  border:5px solid #1c1c1c;
  display:grid;
  grid-template-columns:39% 61%;
  overflow:hidden;
}

.menu{
  padding:30px 31px 34px;
  background:white;
  position:relative;
  z-index:2;
}

.menu h1{
  margin:0 0 43px;
  font-size:clamp(44px,4.2vw,67px);
  line-height:.80;
  letter-spacing:-3.5px;
  font-weight:900;
}

.intro{
  max-width:395px;
  font-size:16px;
  line-height:1.28;
}

.intro p{margin:0 0 18px}

.group{margin-top:27px}
.group h2{
  margin:0 0 3px;
  font-size:30px;
  line-height:1;
  letter-spacing:-1px;
}
.group ul{margin:0;padding-left:20px}
.group li{
  padding:0;
  margin:0;
  font-size:16px;
  line-height:1.28;
}

.hero{
  margin:0;
  position:relative;
  min-width:0;
  min-height:700px;
  overflow:hidden;
  background:#ddd;
}
.hero img{
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
  object-fit:cover;
  object-position:center;
}
.hero figcaption{
  position:absolute;
  right:10px;
  bottom:8px;
  margin:0;
  color:#fff;
  font-size:10px;
  text-shadow:0 1px 4px rgba(0,0,0,.8);
}

/* Interior/project pages */
.project{
  max-width:930px;
  margin:0 auto;
  padding:42px 30px 90px;
}
.project .home{
  display:inline-block;
  margin-bottom:65px;
  font-weight:800;
  text-transform:uppercase;
}
.project h1{
  margin:0 0 45px;
  font-size:clamp(46px,7vw,82px);
  line-height:.9;
  letter-spacing:-3px;
}
.project h2{font-size:34px;margin:55px 0 10px}
.project p{
  max-width:810px;
  font-size:20px;
  line-height:1.45;
}
.project table{width:100%;border-collapse:collapse;font-size:17px}
.project th,.project td{
  padding:12px 10px 12px 0;
  border-bottom:1px solid #aaa;
  text-align:left;
  vertical-align:top
}

@media(max-width:800px){
  body{padding:10px}
  .frame{
    min-height:0;
    grid-template-columns:1fr;
    border-width:4px;
  }
  .menu{padding:25px 23px 32px}
  .menu h1{
    font-size:48px;
    letter-spacing:-2.5px;
    margin-bottom:32px;
  }
  .hero{
    min-height:72vh;
    order:2;
  }
  .project{padding:28px 22px 70px}
  .project .home{margin-bottom:45px}
  .project p{font-size:17px}
}